Javascript 单击定位点内的div时取消定位点

我的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函数（然后会显示一些上下文菜单）？

如果使用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>

---

您可以使用

stopPropagation

事件方法：

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

---

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

这必须处理事件冒泡

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