jQuery阻止事件冒泡
来源:互联网 发布:python客户端开发 编辑:程序博客网 时间:2024/05/16 15:43
jQuery 提供了两种方式来阻止事件冒泡。
方式一: event.stopPropagation();
$("#div1").mousedown(function(event) { event.stopPropagation();});
方式二:return false;
$("#div1").mousedown(function(event) { return false;});
二者区别:
event.stopPropagation() 则只阻止事件往上冒泡, 不阻止事件本身;
return false 不仅阻止了事件往上冒泡, 而且阻止了事件本身。
代码示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./jquery-3.2.1.min.js"></script> <script src="./script.js"></script></head><body> <div id="dTest"> <a id="aTest" href="http://www.baidu.com/">百度</a> </div></body></html>
情形1:JS代码
$(document).ready(function() { $('#aTest').on('click', function(evt) { alert('abc-By-a') }) $('#dTest').on('click', function() { alert('abc-By-div'); })})
分析:当点击“百度”时,会先后弹出’abc-By-a’及’abc-By-div’两个对话框,然后会跳转到百度;
情形2:JS代码
调用事件对象的 .preventDefault() 方法可以阻止事件的默认行为:
$(document).ready(function() { $('#aTest').on('click', function(evt) { alert('abc-By-a') evt.preventDefault(); }) $('#dTest').on('click', function() { alert('abc-By-div'); })})
分析:当点击“百度”时,会先后弹出’abc-By-a’及’abc-By-div’两个对话框,然后不会跳转到百度;(因为a标签的默认行为被阻止了)
【jQuery 还有另外一个方法 .stopImmediatePropagation() 调用后事件冒泡被阻止同时该元素上后面绑定的事件处理程序也不会执行了】
情形3:JS代码
调用事件对象的 .stopPropagation() 方法可以阻止事件冒泡:
$(document).ready(function() { $('#aTest').on('click', function(evt) { alert('abc-By-a') evt.stopPropagation(); }) $('#dTest').on('click', function() { alert('abc-By-div'); })})
分析:当点击“百度”时,会先后弹出’abc-By-a’一个对话框,然后会跳转到百度;(因为a标签冒泡被阻止了)
情形4:JS代码
在事件处理程序中直接返回 false 可以同时取消冒泡和阻止默认行为:
$(document).ready(function() { $('#aTest').on('click', function(evt) { alert('abc-By-a') return false; }) $('#dTest').on('click', function() { alert('abc-By-div'); })})
分析:当点击“百度”时,会弹出’abc-By-a’一个对话框,不会弹出’abc-By-div’对话框,也不会跳转到百度;(因为a标签的默认行为被阻止了,因为a标签冒泡也被阻止了)
阅读全文
0 0
- jQuery阻止事件冒泡
- Jquery 阻止事件冒泡
- 阻止jQuery事件冒泡
- 阻止jQuery事件冒泡
- jquery阻止事件冒泡
- 阻止jQuery事件冒泡
- jquery阻止事件冒泡
- 阻止jQuery事件冒泡
- jquery阻止事件冒泡
- jQuery事件冒泡阻止
- JQuery阻止事件冒泡
- jquery阻止事件冒泡
- JQuery阻止事件冒泡
- jquery 阻止事件冒泡
- jQuery阻止事件冒泡
- jQuery阻止事件冒泡
- jQuery阻止事件冒泡
- jQuery阻止事件冒泡
- ASP.NET MVC网站部署在阿里云服务器(WindowsServers2012+IIS6.0环境)
- python2 和python3 怎么可以 同时存在 ?
- MyBatis中的批量操作
- linux的移动配置
- 程序执行顺序
- jQuery阻止事件冒泡
- UVA 1594
- cxf+spring实现webservice
- Ubuntu16.04设置OpenVPN服务器
- mysql-5.7.19-winx64 免安装版配置方法
- 多分支
- zookeeper伪集群启动失败失败:Invalid config, exiting abnormally
- 中国黑客六道:用代码制作两只乌龟养养
- Hibernate框架快速入门