单击锚点内的div时取消锚点

Question

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

此代码呈现如下：

一般来说行为是可以的，点击这个锚点的任何地方都应该引导我到另一个页面，但是我希望能够点击那些光泽的瓷砖[SL] [PL] [AE]并显示一个上下文菜单对于那些。 什么是改变这种行为的干净方法，以便我仍然可以点击任何地方导航到somepage.html，除非我点击这些图块，导航不应该发生，而是激发一个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;

Answer 2

您可以使用stopPropagation事件方法：

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

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