上一个div点击锚

我在我的HTML有一个锚元素中时取消锚：上一个div点击锚

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

此代码将呈现这样的：

的行为是在确定一般来说，点击这个锚点的任何地方都应该指引我到另一个页面，但是我希望能够点击那些lightgrey贴图[SL] [PL] [AE]并为这些页面显示一个上下文菜单。什么是干净的方法来改变这种行为，以便我仍然可以点击任何地方导航到somepage.html，除非我点击这些瓷砖，导航不应该发生，而是激发一个JavaScript函数（然后将显示一些上下文菜单）？

来源

2016-06-10 Andras

添加您的CSS ... –

这必须处理事件冒泡 – Observer

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

来源

2016-06-10 22:12:53 Greg01re

您可以使用stopPropagation事件方法：

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

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

来源

2016-06-10 22:14:28

上一个div点击锚

回答

相关问题