我目前正在使用jQuery使div可点击,在这个div中我也有锚点.我遇到的问题是,当我点击一个锚点时,两个点击事件都会被触发(对于div和锚点).如何在单击锚点时阻止div的onclick事件触发？
这是破碎的代码:
JavaScript的
var url = $("#clickable a").attr("href");
$("#clickable").click(function() {
window.location = url;
return true;
})
HTML
<div id="clickable">
<!-- Other content. -->
<a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>
我搜索并找到了一些类似的答案 - 但那些是围绕我没有使用的手风琴。
我嵌套了折叠项目，如本 codepen 中所示
$('#collapseOutter').on('show.bs.collapse', function(event) {
$('#collapseBtn').html("Show Less");
console.log('Only happen when outter div is opened');
event.stopPropagation();
console.log('even with stopping propagation it fires');
})
$('#collapseOutter').on('hide.bs.collapse', function() {
$('#collapseBtn').html("Show More");
console.log('Only happen when outter div is collapsed');
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row ml-4">
<div class="row header-div">
<a id="collapseBtn" class="btn-info btn" data-toggle="collapse" href="#collapseOutter" role="button" aria-expanded="false" aria-controls="collapseOutter">
Show More
</a>
</div>
</div>
<div class="row ml-4">
<div id="collapseOutter" class="collapse">
<p>Here is a paragraph …我有一些大规模嵌套的GUI控件 - 当它们被点击或更改时,或者我需要阻止事件进一步向上移动DOM树.它需要适用于所有浏览器.
在这一点上,我有一些相当笨重的JS代码:
//Do something in response to the original user action
//Leave it at that.
try {
e.stopPropagation();
}
catch (ex) {
}
try {
event.cancelBubble();
}
catch (ex) {
}
try {
event.preventDefault();
}
catch (ex) { }
...
这确实有效,但它闻起来和感觉不对(我个人不喜欢空的挡块).我可以使用更简洁的x浏览器技巧吗？