jquery阻止冒泡事件:$('span').bind("click",function(event){event.stopPropagation();})(有用源)
来源:互联网 发布:国外网络流行模式 编辑:程序博客网 时间:2024/06/05 22:36
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
<body><div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素</div><div id="msg"></div></body>
<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的点击事件。
如何防止这种冒泡事件发生呢?
修改如下:
<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>
event.stopPropagation(); // 阻止事件冒泡
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。<script type="text/javascript">$(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值,val() 方法返回或设置被选元素的值。 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) } })})</script>
<body><form action="test.html">用户名:<input type="text" id="username" /><br/><input type="submit" value="提交" id="sub"/></form><div id="msg"></div></body>
还有一种防止默认行为的方法就是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>原文地址:http://www.cnblogs.com/jiqing9006/archive/2012/09/11/2679831.html
0 0
- jquery阻止冒泡事件:$('span').bind("click",function(event){event.stopPropagation();})(有用源)
- jquery阻止冒泡事件:$('span').bind("click",function(event){event.stopPropagation();})(有用源)
- 阻止事件冒泡event.stopPropagation()
- AngularJS阻止事件冒泡$event.stopPropagation()
- jQuery中event.stopPropagation()阻止事件冒泡及event.preventDefault()阻止默认行为
- jquery的冒泡事件event.stopPropagation()
- jquery的冒泡事件event.stopPropagation()兼容问题
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
- 阻止冒泡的方法 event.stopPropagation();
- 阻止默认和冒泡事件,认清event.preventDefault()、event.stopPropagation()和return false区别
- s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
- AS3 event flow 事件冒泡机制 以及 stopImmediatePropagation() stopPropagation()用法
- 阻止jquery 的click事件冒泡
- AngularJS ng-click stopPropagation(阻止冒泡)
- jquery event.stopImmediatePropagation 和event.stopPropagation
- [jQuery]event.stopPropagation()报错
- jQuery Event.stopPropagation() 函数详解
- jQuery Event.stopPropagation() 函数详解
- hdu 4630 No Pain No Game(树状数组离线操作)
- linux的w命令
- db2数据类型详解
- Java面向对象——封装
- 求一个数列的逆序数
- jquery阻止冒泡事件:$('span').bind("click",function(event){event.stopPropagation();})(有用源)
- WPF应用Binding之Path
- storm用于提高处理速度的并行度设计的感想2
- Spring quartz(定时器任务)
- java struts2 标签<s:property>的用法
- 【设计】宣传单尺寸等设计要点
- 使用Junit的时候出现InitializationError
- file_operations方法清单
- linux串口驱动分析