事件委托与阻止冒泡阻止其父元素事件触发_jquery
程序员文章站
2022-04-09 15:15:11
...
简单说下事件委托与阻止冒泡
html:
- 全部
- 纽约
- 洛杉矶
- 拉斯维加斯
- 夏威夷
- 旧金山
- 奥兰多
- 西雅图
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被点击"); });
加一句阻止冒泡即可。
下一篇: php数据类型
推荐阅读
-
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
-
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
-
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
-
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法_jquery
-
jquery的冒泡事件的阻止与允许(三种实现方法)_jquery
-
事件委托与阻止冒泡阻止其父元素事件触发_jquery
-
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法_jquery
-
jquery的冒泡事件的阻止与允许(三种实现方法)_jquery
-
jquery的冒泡事件的阻止与允许(三种实现方法)
-
事件委托与阻止冒泡阻止其父元素事件触发_jquery