利用JQuery阻止事件冒泡
2016-12-01 00:00
761 查看
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡。
通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡。
显示结果
对应的jQuery代码如下:
当点击小div时,会触发大div与body 的点击事件。点击大div时会触发body的点击事件。
如何防止这种冒泡事件发生呢?
修改如下:
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
html部分
//阻止默认行为 ( 表单提交 )
event.preventDefault();
还有一种防止默认行为的方法就是return false。效果一样。
代码如下:
同理,上面的冒泡事件也可以通过return false来处理。
以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持脚本之家!
jQuery中on绑定事件后引发的事件冒泡问题如何解决
深入理解jQuery之防止冒泡事件
深入理解jQuery中的事件冒泡
理解jquery事件冒泡
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
JavaScript和JQuery的鼠标mouse事件冒泡处理
JQuery中DOM事件冒泡实例分析
jQuery中事件对象e的事件冒泡用法示例介绍
jQuery中阻止冒泡事件的方法介绍
js阻止冒泡及jquery阻止事件冒泡示例介绍
我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡。
通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡。
<style> #content{ width: 140px; border: 1px solid blue; } #msg{ width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style> <body> <div id="content"> 外层div <div id="msg"> 内层div </div> </div> </body>
显示结果
对应的jQuery代码如下:
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(){ alert("我是小div"); }); // 为外层div元素绑定click事件 $("#content").click(function(){ alert("我是大div"); }); // 为body元素绑定click事件 $("body").click(function(){ alert("我是body"); }); }); </script>
当点击小div时,会触发大div与body 的点击事件。点击大div时会触发body的点击事件。
如何防止这种冒泡事件发生呢?
修改如下:
event.stopPropagation(); // 阻止事件冒泡
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
html部分
<body> <form action="test.html"> 用户名:<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //获取元素的值,val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空"); $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) event.preventDefault(); } }); }); </script>
//阻止默认行为 ( 表单提交 )
event.preventDefault();
还有一种防止默认行为的方法就是return false。效果一样。
代码如下:
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //获取元素的值,val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空"); $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) //event.preventDefault(); return false; } }); }); </script>
同理,上面的冒泡事件也可以通过return false来处理。
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(event){ alert("我是小div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 为外层div元素绑定click事件 $("#content").click(function(event){ alert("我是大div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 为body元素绑定click事件 $("body").click(function(event){ alert("我是body"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); });
以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
jquery取消事件冒泡的三种方法(推荐)jQuery中on绑定事件后引发的事件冒泡问题如何解决
深入理解jQuery之防止冒泡事件
深入理解jQuery中的事件冒泡
理解jquery事件冒泡
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
JavaScript和JQuery的鼠标mouse事件冒泡处理
JQuery中DOM事件冒泡实例分析
jQuery中事件对象e的事件冒泡用法示例介绍
jQuery中阻止冒泡事件的方法介绍
js阻止冒泡及jquery阻止事件冒泡示例介绍
相关文章推荐
- 利用JQuery阻止事件冒泡
- javascript事件冒泡实例详解和jquery阻止事件冒泡的两种方法
- Jquery阻止事件冒泡
- jquery 阻止冒泡事件实例 stopPropagation
- 阻止jQuery事件冒泡
- 带你学习JQuery:事件冒泡和阻止默认行为
- jQuery阻止事件冒泡2010-04-09 11:37
- jQuery 中的事件冒泡和阻止默认行为
- jquery阻止事件冒泡的两种方法 .
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- JQuery 中阻止冒泡事件
- Jquery阻止事件冒泡 event.stopPropagation
- JS:停止事件冒泡和阻止浏览器的默认行为 js/jquery/prototype
- jQuery阻止事件冒泡
- jquery阻止事件冒泡的两种方法
- jquery 阻止事件默认行为和事件冒泡的BUG在jquery-1.4.3中
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- jquery与js阻止事件冒泡
- 利用事件冒泡和阻止事件冒泡的例子
- jQuery阻止 toggle方法事件冒泡