由js中一句return false引发出来的许多事
2014-04-11 13:50
281 查看
在网上扒了一段代码,看了一下,没弄懂那句[return false;]的意思,于是就好奇的问了一下群里面的大神些,谁知道居然问出来那么多知识点!
阻止触发事件的元素的默认动作
阻止触发事件的元素向上传递事件
上面两句话太书面了,总结来说就是阻止默认行为和阻止冒泡。
2.默认行为
什么叫默认行为?比如有一个链接<a href="http://baidu.com"></a> 这个链接的默认行为就是跳转到百度页面。
3.冒泡
什么叫冒泡?在网上扒了一段解释:
●事件捕获其实有三种方式,事件冒泡只是其中的一种:(1)IE从里到外(inside→outside)的冒泡型事件。(2)Netscape4.0从外到里(outside→inside)的捕获型事件。(3)DOM事件流,先从外到里,再从里到外回到原点(outside→inside→outside)的事件捕获方法(似乎对象将触发两次事件处理,这有什么作用?鄙人不懂!)。
●不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload。
●事件捕获方式在不同浏览器,甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案,其它多数浏览器则支持冒泡型事件解决方案,另外DOM事件流还支持文本节点事件冒泡。
●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的,另外大部分浏览器将冒泡延续到window对象,即……body→documen→window。
●阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据,这种行为无须我们写程序定制。
举个例子:
html:
JS:
点击链接之后,先会弹出This is a link!,然后弹出This is child!,最后弹出This is parent!,这说明,点击a之后,也触发了它父级元素上的click事件,这就可以简单的理解为事件冒泡。然后链接会执行默认行为,即跳转到百度。
在这里,如果在func_a()函数里面追加一句,rerun flase,则只会弹出This is a link!,不会弹出其他的,也不会跳转到百度,说明冒泡和默认行为都被阻止了。
即使是在确实要使用[return false;]的地方,也可以上面的情况五那样用[preventDefault]和[stopPragation]来代替。
这样可以使代码的含义更加明确,可读性更好。
一、理解
1.[return flase;]阻止触发事件的元素的默认动作
阻止触发事件的元素向上传递事件
上面两句话太书面了,总结来说就是阻止默认行为和阻止冒泡。
2.默认行为
什么叫默认行为?比如有一个链接<a href="http://baidu.com"></a> 这个链接的默认行为就是跳转到百度页面。
3.冒泡
什么叫冒泡?在网上扒了一段解释:
●事件捕获其实有三种方式,事件冒泡只是其中的一种:(1)IE从里到外(inside→outside)的冒泡型事件。(2)Netscape4.0从外到里(outside→inside)的捕获型事件。(3)DOM事件流,先从外到里,再从里到外回到原点(outside→inside→outside)的事件捕获方法(似乎对象将触发两次事件处理,这有什么作用?鄙人不懂!)。
●不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload。
●事件捕获方式在不同浏览器,甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案,其它多数浏览器则支持冒泡型事件解决方案,另外DOM事件流还支持文本节点事件冒泡。
●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的,另外大部分浏览器将冒泡延续到window对象,即……body→documen→window。
●阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据,这种行为无须我们写程序定制。
举个例子:
html:
<div class="parent"> <div class="child"> <a href="http://baidu.com">点我!</a> </div> </div>
JS:
$(function(){ $('a').bind('click',func_a); $('.child').bind('click',func_b); $('.parent').bind('click',func_c); function func_a(e){ alert('This is a link!'); // return false;//阻止默认行为和阻止冒泡 // e.preventDefault();//阻止默认行为 // e.stopPropagation();//阻止冒泡 } function func_b(){ alert('This is child!'); } function func_c(){ alert('This is parent!'); } });
点击链接之后,先会弹出This is a link!,然后弹出This is child!,最后弹出This is parent!,这说明,点击a之后,也触发了它父级元素上的click事件,这就可以简单的理解为事件冒泡。然后链接会执行默认行为,即跳转到百度。
在这里,如果在func_a()函数里面追加一句,rerun flase,则只会弹出This is a link!,不会弹出其他的,也不会跳转到百度,说明冒泡和默认行为都被阻止了。
二、e.preventDefault和e.stopPropagation
在javascript中e.preventDefault被用作阻止默认行为,e.stopPropagation被用作阻止事件冒泡。三、建议
建议尽量使用[preventDefault]和[stopPragation]函数,即使是在确实要使用[return false;]的地方,也可以上面的情况五那样用[preventDefault]和[stopPragation]来代替。
这样可以使代码的含义更加明确,可读性更好。
相关文章推荐
- 许多js框架或js库的min版本是怎么做出来的?
- js选择日期即时把两个日期相差天数显示出来?
- js中return,return false,return ture区别
- 一句JS搞定只允许输入数字和字母
- 一个JS引发的血案
- 许多实用的JS 正则表达式
- js/jquery让数字号码一个一个出来的效果
- JS URL传中文参数引发的乱码问题
- js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
- web开发助手,拖拽一下就出来一个标签样例,js样例(版本更新到1.5)
- java后台查询出来的日期用JS解析
- Node.Js执行原理图引发的思考
- 一道原生js题目引发的思考(鼠标停留区块计时)
- 在JSP页面里,时间控件的JS位置在下面然后就显示不出来
- JS中return、return false、return true的区别
- 一个讨论引发关于js中函数声明,函数表达式,形参与变量声明赋值引发的一些事(http://www.cnblogs.com/zhouyongtao/archive/2012/11/22/2783089)
- SQL Server 一句Sql把表结构全部查询出来
- JS加载不出来 必须alert才可以 alert另一种功能
- JS URL传中文参数引发的乱码问题
- 一个逗号引发的问题 js错误