你能否向我解释为什么jQuery正在制作永不停止的循环？

Question

我在这里托管了我的jQuery代码,https://jsfiddle.net/f7u2yqpe/,真的很想知道为什么它会永远结束循环.

HTML

<ul id='user_menu'>
  <li>
    <a class='shopping_cart'>click this</a>
  </li>
</ul>

jQuery的

$('#user_menu > li').click(function() { $(this).children('a:first').click(); } );
$('.shopping_cart').click(function(){ alert('hi') });

因此,如果我点击click me它不应该只调用警报两次,一个用于li选择器,另一个用于.shopping_cart选择器.

Answer 1

原因是javascript中的事件冒泡.当对元素执行事件时,事件沿DOM传播并在目标元素的每个父元素上触发.当您单击a事件气泡时,li会再触发一次点击,a产生无限循环

关于事件冒泡:http://javascript.info/tutorial/bubbling-and-capturing

为了防止这种情况,您只需在事件上显式调用停止传播:

$('.shopping_cart').click(function(event){ 
    event.stopImmediatePropagation()
    alert('hi') 
});