JQuery阻止冒泡事件on绑定中异常情况分析
本文转载自https://www.cnblogs.com/tengj/p/4794947.html,纯粹作为日常笔记使用
科普下事件冒泡以及默认行为,以下面例子举列子:
事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。
事件冒泡可能会引起意料之外的效果,有时候需要阻止事件的冒泡行为。
默认行为:例子中a的href跳转链接就是所谓的默认行为,或者是表单form的提交。
JQuery中阻止冒泡常用到的有以下3个方法:
1:event.stopPropagation(); 只阻止了冒泡事件, 默认行为没有阻止
2:event.preventDefault(); 只阻止了默认事件,冒泡事件没有阻止
3:return false; 冒泡事件和默认事件都阻止
具体对应列子:
1:event.stopPropagation();
<body><a id="p" href="http://www.baidu.com" target="_blank">我是超级链接<button id="sub">子按钮</button></a><div id="text"></div></body>
<script>$(function(){$("#p").click(function(event){$("#text").append("<p>父亲元素被点击</p>");})$("#sub").click(function(event){$("#text").append("<p>子元素被点击</p>");event.stopPropagation(); //只阻止了冒泡事件, 默认默认行为没有阻止})})</script>
效果截图:
默认点击父亲元素:
默认点击子元素,事件冒泡了:
加上event.stopPropagation(),可以看到阻止了父亲的单击事件,但是没有阻止父亲a元素hreaf的默认行为,也就是打开新的窗口:
2:event. preventDefault();
<script>$(function(){$("#p").click(function(event){$("#text").append("<p>父亲元素被点击</p>");})$("#sub").click(function(event){$("#text").append("<p>子元素被点击</p>");event.preventDefault(); //只阻止了默认事件,冒泡事件没有阻止})})</script>
event. preventDefault()加上后,有阻止了默认行为,没有打开新的href窗口,但是没有阻止冒泡事件,父亲的click还是触发了:
3:return false;
<script>$(function(){$("#p").click(function(event){$("#text").append("<p>父亲元素被点击</p>");})$("#sub").click(function(event){$("#text").append("<p>子元素被点击</p>");return false; //冒泡事件和默认事件都阻止})})</script>
return false加上后既没有冒泡,也没有打开新窗口:
以上就是工作上经常用到的阻止冒泡和默认行为的方法。实际情况根据需求确定使用哪种方法
这里再说明一下如果是动态生成的元素用on来绑定事件,遇到的阻止冒泡的一些问题,大家参考一下下面是我测试的几个列子:
1:父亲跟孩子同时用on来绑定:
A:绑定的父节点不是同一个,父亲绑定的父元素更外面(绑定body):
<body id="body"><div id="bb"><a id="p" href="http://www.baidu.com" target="_blank" >我是超级链接<button id="sub">子按钮</button></a></div><div id="text"></div></body>
<script>$(function(){/父亲节点a绑定到body中$("#body").on("click","#p",function(event){$("#text").append("<p>父亲元素被点击</p>");})//孩子节点绑定在div中$("#bb").on("click","#sub",function(event){$("#text").append("<p>子元素被点击</p>");event.stopPropagation(); //只阻止了冒泡事件, 默认默认行为没有阻止})})</script>
测试结果:有阻止冒泡事件
B:绑定的父节点不是同一个,孩子绑定的父元素更外面(绑定body)
<script>$(function(){/父亲节点a绑定到div中$("#bb").on("click","#p",function(event){$("#text").append("<p>父亲元素被点击</p>");})//孩子节点绑定在body中$("#body").on("click","#sub",function(event){$("#text").append("<p>子元素被点击</p>");event.stopPropagation(); //只阻止了冒泡事件, 默认默认行为没有阻止})})</script>
测试结果:阻止冒泡失败,并且是父亲元素a的click先触发
C:绑定的父节点是同一个:
都绑定在body或者div上,测试结果正常,有阻止冒泡事件:
2:父亲直接写onclick事件,孩子直接用on绑定
<body id="body"><div id="bb"><a id="p" href="http://www.baidu.com" target="_blank" onclick="test()">我是超级链接<button id="sub">子按钮</button></a></div><div id="text"></div></body>
<script>$(function(){$("#bb").on("click","#sub",function(event){$("#text").append("<p>子元素被点击</p>");event.stopPropagation(); //只阻止了冒泡事件, 默认默认行为没有阻止})})function test(){$("#text").append("<p>父亲元素被点击</p>");}</script>
测试结果:阻止冒泡失败,并且是父亲元素a的click先触发
3:孩子直接写onclick事件,父亲直接用on绑定
<body id="body"><div id="bb"><a id="p" href="http://www.baidu.com" target="_blank">我是超级链接<button id="sub" onclick="test(event)">子按钮</button></a></div><div id="text"></div></body>
<script>$(function(){//父亲绑定到body$("#body").on("click","#p",function(event){$("#text").append("<p>父亲元素被点击</p>");})})function test(event){ //event在onclick那边直接传入,这样才支持所有浏览器$("#text").append("<p>子元素被点击</p>");event.stopPropagation();}</script>
测试结果:阻止冒泡成功
好了,以上有涉及on绑定做的测试总结如下:
1:父亲跟孩子同时用on来绑定:
A:绑定的父节点不是同一个,父亲绑定的父元素更外面(绑定body) 阻止冒泡事件成功
B:绑定的父节点不是同一个,孩子绑定的父元素更外面(绑定body) 阻止冒泡失败,并且是父亲元素a的click先触发
C:绑定的父节点是同一个: 阻止冒泡事件成功
2:父亲直接写onclick事件,孩子直接用on绑定 阻止冒泡失败,并且是父亲元素a的click先触发
3:孩子直接写onclick事件,父亲直接用on绑定 阻止冒泡成功
常规JQuery中阻止冒泡常用到的有以下3个方法:
1:event.stopPropagation(); 只阻止了冒泡事件, 默认行为没有阻止
2:event.preventDefault(); 只阻止了默认事件,冒泡事件没有阻止
3:return false; 冒泡事件和默认事件都阻止
JQuery阻止冒泡事件on绑定中异常情况分析相关推荐
- js jquery阻止冒泡事件
event.stopPropagation(); -- 阻止元素冒泡事件 注:嵌套元素一般都存在冒泡事件,会带来某些影响 例:<div id="c1" οnclick=& ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- jquery阻止冒泡事件行为发生
<div οnclick="a()"> <p οnclick="b()"></p> </div> div和p元素 ...
- jQuery阻止冒泡事件的方法
jQuery提供了两种阻止冒泡事件的方法 方式一.event.stopPropagation() $('#div1').mousedown(function(event){ event.stopPro ...
- jQuery阻止冒泡事件(单击事件执行了两次或多次)
一.第一种(亲测) 下面代码报错但能解决冒泡问题,因为正确调用方法为:event.stopPropagation(); event.stopPropagation() 方法:终止事件在传播过程的捕获. ...
- jQuery阻止冒泡事件的几种方法
一.何为冒泡事件 冒泡事件简单来说就是点击子节点,会向上触发父节点.祖先节点的点击事件. 二.阻止事件冒泡 可以通过以下三种方法做到不同程度的阻止. 1.return false (In event ...
- jquery阻止冒泡事件
nt.stopPropagation(); $(function() { $(".three").click(function(event) { event.stopPropaga ...
- jquery阻止冒泡事件(阻止点击子元素触发父元素)
1.阻止onclick事件 采用window.event.stopPropagation(); 示例: **HTML:** <div onclick = "feather()" ...
- jquery 阻止冒泡事件
在工作中遇见了因jquery冒泡引起的问题,刚好总结一下 <!DOCTYPE html> <html lang="en"> <head> < ...
最新文章
- 初识java-循环结构(二):6
- 下运行maven命令_实话实说 | 这些maven命令,你会几个?
- ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysq
- logstash接收多台服务器日志_Logstash实践: 分布式系统的日志监控
- feedback.php,feedback.php
- html树状图右侧_treeview-树形菜单js组件编写及应用
- SDS趋势之二:对象存储将替代文件存储
- [论文阅读] Cross-layer feature pyramid network for salient object detection
- 在文本和图像上的对比学习小综述~
- faceframe kinect2.0 api 注意点
- 分布式统一框架的设计与实现(数据库)
- 蓝桥杯练习题JAVA 圆的面积
- SOLIDWORKS Electrical无缝集成电气和机械设计
- C++之struct构造函数
- 政策解读 | 传言PayPal要封杀独立站卖家?绝对不可能!
- 塔塔露也能学会的算法(2) | 我有背包你有手么
- PMBOK6相关方:权利利益方格
- java模拟器修改游戏分辨率_海马玩模拟器修改分辨率DPI和隐藏虚拟按键的方法...
- breakpoint断点调试
- crypt-5+n凯撒密码