Jquery实现点击子元素标签只触发子元素点击事件,不触发父元素点击事件
2017-06-07 09:59
656 查看
最近写代码遇到一个细节的小问题,点击子元素标签不仅触发了子元素点击事件,还会执行父元素点击事件,例如:<li>
<a>
子元素
</a>
<i tabclose="11" >
子元素
</i>
</li>为li标签和i标签都添加点击事件后,当我点击i标签区域,li标签的点击事件也会触发,后来经过查询文档发现,避免这个问题只需要为i标签的点击事件上加上jquery防止事件冒泡即可,如下:
$("i").on("click", "[tabclose]", function(e) {
<a>
子元素
</a>
<i tabclose="11" >
子元素
</i>
</li>为li标签和i标签都添加点击事件后,当我点击i标签区域,li标签的点击事件也会触发,后来经过查询文档发现,避免这个问题只需要为i标签的点击事件上加上jquery防止事件冒泡即可,如下:
$("i").on("click", "[tabclose]", function(e) {
e.stopPropagation();//防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。 var id = $(this).attr("tabclose"); ... });
相关文章推荐
- jquery实现点击某元素之外触发事件
- jquery实现点击某元素之外触发事件
- jquery实现点击某元素之外触发事件
- jQuery事件函数-点击、双击、键盘按键、鼠标滑动、失去焦点、显示哪个 DOM 元素触发了事件/返回事件的类型。等
- jquery 触发a标签点击事件,弹出页面
- jq实现点击某元素之外触发事件
- jQuery触发a标签点击事件-为什么不跳转
- jquery 点击 触发上一元素 事件
- 使用jQuery 模拟鼠标点击a标签事件 实现定位
- jquery阻止子元素触发父元素的事件的方法
- jquery实现点击label的同时触发文本框点击事件的方法
- jQuery触发<a>标签的点击事件无效
- jquery 触发a标签点击事件,弹出页面;不被浏览器屏蔽拦截的打开窗口的方法
- ios 用jquery为元素标签绑定点击事件时,ios上不执行点击事件
- jQuery触发<a>标签的点击事件无效
- jquery实现点击触发执行不同的事件
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- JQuery实现点击div里面的a的能触发点击时间,但是不触发外面的div的点击事件
- jQuery给一个元素绑定事件前,一次点击会多次触发的问题所在
- jQuery代码,让A标签拥有点击事件,实现确认,提交按钮