单击锚点内的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>
并使用基本的CSS对其进行样式设置。
编辑：为了支持IE的旧版本，您还可以在e.stopPropagation（）之后添加它；
event.cancelBubble = true;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
从可单击的div内的按钮中删除锚点效果
- 2
从可单击的div内的按钮中删除锚点效果
- 3
图像内的锚点
- 4
Java HtmlUnit单击锚点
- 5
Java HtmlUnit单击锚点
- 6
防止锚点内单击DOM生成的元素时发生锚点行为
- 7
Flexbox 在锚点内生长
- 8
切换div（锚点单击除外）
- 9
如何使用addClass和removeClass相同的锚点和div ..锚点单击addClass并激活addClass项
- 10
如何使用addClass和removeClass相同的锚点和div ..锚点单击addClass并激活addClass项
- 11
锚点上的嵌套ul show单击
- 12
单击锚点时如何停止悬停？
- 13
dynamicjs在单击时显示图像锚点
- 14
锚点上的嵌套ul show单击
- 15
如何覆盖* only *左键单击锚点？
- 16
HTML 锚点单击事件设置变量
- 17
单击锚点后如何提醒标签
- 18
通过单击元素内的锚点或包含div ID的任何地方，将元素滚动到页面顶部
- 19
锚点标签内的jQuery click事件
- 20
锚点标记内的jQuery click事件
- 21
HtmlUnit-无法从div获取锚点
- 22
用div更改锚点属性
- 23
HtmlUnit-无法从div获取锚点
- 24
更改特定div中的锚点
- 25
HTML / CSS在锚点div上方锚定
- 26
由div控制的锚点高度
- 27
内联显示<a>锚点
- 28
svg锚点动画
- 29
iTextSharp ShowTextAligned锚点
我来说两句