事件委托与阻止冒泡阻止其父元素事件触发

事件委托与阻止冒泡阻止其父元素事件触发

简单说下事件委托与阻止冒泡

html:

&lhttp://t;/ul>

js:

$("ul[data-type='cityPick']").on('click',function(){

alert("父元素ul被点击");

});

$("ul[data-type='cityPick']").on('click','li',function(){

alert("子元素li被点击");

});

当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的。

解决：

$("ul[data-type='cityPick']").on('click',function(){

alert("父元素ul被点击");

});

$("ul[data-type='cityPick']").on('click','li',function(e){

e.stopPropagation();//阻止冒泡

alert("子元素li被点击");

});

加一句阻止冒泡即可。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。