jquery防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件
2016-09-28 15:52
423 查看
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件
e.preventDefault();//阻止浏览器默认行为
e.stopPropagation();//阻止事件冒泡
return false; //停止事件冒泡和阻止浏览器默认行为
html代码:
如何防止这种冒泡事件发生呢? 使用 event.stopPropagation();//阻止事件冒泡
修改jquery代码如下:
例子如下:
html部分
代码如下:
e.preventDefault();//阻止浏览器默认行为
e.stopPropagation();//阻止事件冒泡
return false; //停止事件冒泡和阻止浏览器默认行为
html代码:
<body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body>对应的jquery代码:
<script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息 $('#msg').html(txt);// 设置html信息 }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) </script>当点击span时,会触发div与body的点击事件,点击div时会触发body的点击事件。
如何防止这种冒泡事件发生呢? 使用 event.stopPropagation();//阻止事件冒泡
修改jquery代码如下:
<script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为div元素绑定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) </script>在表单应用中,有时候点击提交按钮会有一些默认事件。比如通过 action="" 跳转到别的页面,但是如果没有通过验证的话,就不应该跳转,这个时候可以通过设置event.preventDefault();//阻止默认行为(action 提交表单)
例子如下:
html部分
<body> <form action="test.html"> 用户名:<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> <div id="msg"></div> </body>jquery部分:
<script type="text/javascript"> $(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值,val() 方法返回或设置被选元素的值。 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) } }) }) </script>另外一种阻止默认行为的方法就是 return false;
代码如下:
<script type="text/javascript"> $(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 return false; } }) }) </script>同理,上面的冒泡事件也可以通过return false 来处理;
<script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); return false; }); // 为div元素绑定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); return false; }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) </script>
相关文章推荐
- jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
- jquery嵌套后会触发2次点击事件, jquery的unbind就是卸载这个点击事件的.
- Jquery触发父节点的a标签的点击事件
- JS触发a节点的点击事件
- jquery 触发a链接点击事件
- jQuery之防止冒泡事件
- jQuery之防止冒泡事件
- jquery 触发a标签点击事件,弹出页面
- div内的button的click会触发两次(防止事件冒泡)
- jquery 动态向下拉列表填充数据,点击下拉列表时传值并触发事件
- js div 排除内部的点击事件 就是 冒泡的处理
- jquery 回车触发按钮点击事件
- jQuery如何防止这种冒泡事件发生
- jquery 触发a链接点击事件
- jQuery之防止冒泡事件
- jquery 点击 触发上一元素 事件
- jQuery触发<a>标签的点击事件无效
- jquery 触发a链接点击事件解决方案
- jquery点击内层的click事件时会触发外层的click事件
- jQuery如何防止这种冒泡事件发生