我有一个div，我已经附加了一个onclick事件。在这个div中有一个带有链接的标签。当我点击链接时，来自div的onclick事件也被触发。我怎么能禁用这一点，如果链接被点击在div onclick不被解雇?
脚本:
$(document).ready(function(){
$(".header").bind("click", function(){
$(this).children(".children").toggle();
});
})
html代码:
<div class="header">
<a href="link.html">some link</a>
<ul class="children">
<li>some list</li>
</ul>
</div>
当前回答
或:
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
return false;
});
});
其他回答
最简单的解决方案是将CSS添加到子节点:
.your-child {
pointer-events: none;
}
或者，与其使用额外的事件处理程序来阻止另一个处理程序，不如使用传递给单击事件处理程序的事件对象参数来确定是否单击了子事件。target将是被点击的元素，currentTarget将是.header div:
$(".header").click(function(e){
//Do nothing if .header was not directly clicked
if(e.target !== e.currentTarget) return;
$(this).children(".children").toggle();
});
这里的回答太字面化了。如何将这些答案扩展到有许多子元素的场景，而不仅仅是一个<a>标记?这里有一种方法。
假设您有一个图片库，该图片库的背景是黑色的，并且照片位于浏览器的居中。当你点击黑色背景(但不是它里面的任何东西)时，你希望覆盖层关闭。
下面是一些可能的HTML:
<div class="gallery" style="background: black">
<div class="contents"> <!-- Let's say this div is 50% wide and centered -->
<h1>Awesome Photos</h1>
<img src="img1.jpg"><br>
<img src="img2.jpg"><br>
<img src="img3.jpg"><br>
<img src="img4.jpg"><br>
<img src="img5.jpg">
</div>
</div>
下面是JavaScript的工作原理:
$('.gallery').click(
function()
{
$(this).hide();
}
);
$('.gallery > .contents').click(
function(e) {
e.stopPropagation();
}
);
这将停止来自每个research .gallery .contents中的元素的单击事件，因此画廊只在您单击褪色的黑色背景区域时关闭，而在内容区域时不会关闭。这可以应用于许多不同的场景。
更好的方法是使用on()和链接，
$(document).ready(function(){
$(".header").on('click',function(){
$(this).children(".children").toggle();
}).on('click','a',function(e) {
e.stopPropagation();
});
});
或:
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
return false;
});
});
