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

时间:2016-06-10 22:08:58

标签: javascript jquery 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>

此代码呈现如下:

Example render

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

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:2)

您可以使用stopPropagation事件方法:

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

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