当单击锚内的div时取消锚

I have an anchor element in my html:

我有一个锚元素在我的html:

<a class="info-tiles tiles-inverse has-footer" href="somepage.html?id=15">
  <div class="tiles-heading">
    <div class="pull-left">IT Department - Hosting environment</div>
  </div>
  <div class="tiles-body">
    <div class="nav-justified" style="font-size: small;">Started: 19-05-2015 07:00</div>
    <div class="btn btn-sm btn-default pull-right">AE</div>
    <div class="btn btn-sm btn-default pull-right">PJ</div>
    <div class="btn btn-sm btn-default pull-right">SL</div>
  </div>
  <div class="tiles-footer">
    <div class="progress">
      <div class="progress-bar progress-bar-info" style="width: 20%"></div>
    </div>
  </div>
</a>

This code renders like this:

此代码呈现如下:

The behavior is ok in general, that clicking on anywhere in this anchor should direct me to the another page, but I'd like to be able to click on those lightgrey tiles [SL][PL][AE] and display a context menu for those. What is a clean approach to change this behavior so that I still can click anywhere to navigate to the somepage.html, except if I click on those tiles, the navigation should not happen, and instead fire a javascript function (which would then display some context menu)?

一般来说，这种行为是可以的，点击这个锚点的任何地方应该会指向另一个页面，但是我希望能够点击那些浅灰色的块[SL][PL][AE] [AE]，并显示它们的上下文菜单。什么是干净的方法来改变这种行为，以便我仍然可以点击任何地方导航到somepage。html，除非我点击那些块，导航就不应该发生，而应该触发一个javascript函数(然后显示一些上下文菜单)?

2 个解决方案

#1

If you use jQuery, you might want to take that approach:

如果您使用jQuery，您可能希望采用以下方法:

$(".btn.btn-sm.pull-right").on("click", function(e) {
    e.stopPropagation();

    $(this).find(".context-menu").toggle();

    e.preventDefault();
    return false;
});

Then you'd need to write a

然后你需要写a

<div class="context-menu">
    <ul>
        <li>Element</li>
    </ul>
</div>

and style it with basic css.

使用基本的css样式。

Edit: To support older version of IE, you might also add that just after the e.stopPropagation();

编辑:为了支持旧版本的IE，您还可以在e.stopPropagation()之后添加该内容;

event.cancelBubble = true;

#2

You can use stopPropagation event method:

可以使用stopPropagation event method:

 $('selector').on('click', function(e)  {
      e.stopPropagation();
      e.preventDefault();
      // your actions 
 });

This allows you to stop bubbling from the button to outside, and prevent to execute the anchor event. I add preventDefault() to avoid default button actions

这允许您停止从按钮冒泡到外部，并防止执行锚事件。我添加了preventDefault()以避免默认的按钮操作

#1