javascript - 单击 anchor 内的 div 时取消 anchor

Question

我的 html 中有一个 anchor 元素:

<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>

这段代码呈现如下:

一般情况下行为正常，点击这个 anchor 的任何地方应该会引导我到另一个页面，但我希望能够点击那些浅灰色的瓷砖 [SL][PL][AE] 并显示那些的上下文菜单。什么是改变这种行为的干净方法，这样我仍然可以点击任何地方导航到 somepage.html，除非我点击那些图 block ，导航不应该发生，而是触发一个 javascript 函数(然后会显示一些上下文菜单)？

Answer 1

如果您使用 jQuery，您可能希望采用这种方法:

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

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

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

然后你需要写一个

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

并使用基本的 CSS 设置样式。

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

event.cancelBubble = true;