hi,欢迎访问本站!
当前位置: 首页学习笔记正文

【小5聊】jQuery基础之冒泡事件解决点击内层div而不触发外层div事件

用户投稿 学习笔记 15阅读

1、设置两个div,如下

<div id="parentDiv" style="padding:20px;width:160px;height:200px;background:#0aadff;color:#fff;"> <span>我是外层div</span> <div id="childrenDiv" style="padding:20px;width: 120px;height: 110px;background:#fff;color: #333;"> <span>我是内层div</span> </div></div><script> $("#parentDiv").click(function(){ alert('我是外层div'); }); $("#childrenDiv").click(function () { alert('我是内层div'); });</script>

2、点击内层div

由于内层和外层div都绑定了单击事件,所以当点击内层div的单击事件时,也会触发外层div的单击事件

事件的触发顺序是由内到外的顺序

3、点击内层div,防止外层事件触发,俗称阻止事件冒泡

$("#childrenDiv").click(function () { alert('我是内层div'); event.stopPropagation();});

 

标签:
声明:无特别说明,转载请标明本文来源!
发布评论
正文 取消