jquery停止孩子触发父事件

我有一个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> 

Answer 1

做这个：

 $(document).ready(function(){ $(".header").click(function(){ $(this).children(".children").toggle(); }); $(".header a").click(function(e) { e.stopPropagation(); }); }); 

如果你想阅读更多关于.stopPropagation（），看看这里 。

Answer 2

或者，您可以使用传递给您的Click事件处理程序的Event Object参数来确定是否单击了某个子项，而不是使用额外的事件处理函数来阻止其他处理程序。 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(); }); 

Answer 3

通过使用on（）与链接更好的方式，

 $(document).ready(function(){ $(".header").on('click',function(){ $(this).children(".children").toggle(); }).on('click','a',function(e) { e.stopPropagation(); }); }); 

Answer 4

这里的答案太字面地解释了OP的问题。 这些答案如何扩展到有许多子元素的场景，而不仅仅是一个<a>标签？ 这是一种方法。

假设您有一个背景不清的照片库和浏览器中居中的照片。 当您单击黑色背景（但不包含任何内容）时，您希望叠加层closures。

这里有一些可能的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(); } ); 

这将停止来自每个研究.gallery .contents内的元素的点击事件，因此，只有当您在褪色的黑色背景区域中单击时，图库才会closures，而不是在您点击内容区域时closures。 这可以应用于许多不同的情况。

Answer 5

更短的方法来做到这一点：

 $('.header').on('click', function () { $(this).children('a').on('click', function(e) { e.stopPropagation(); $(this).siblings('.children').toggle(); }); }); 

Answer 6

或这个：

 $(document).ready(function(){ $(".header").click(function(){ $(this).children(".children").toggle(); }); $(".header a").click(function(e) { return false; }); });