——–关于取消默认行为不同方法在不同的事件绑定中的不同反应
在js代码中取消默认行为我们经常使用return false与event.preventDefault
1、return false不只取消默认行为,还会阻止event flow
2、event.preventDefault是取消默认行为的DOM标准方法,IE浏览器提供了event.returnValue = false来阻止默认行为,与preventDefault效果相同(IE9已添加preventDefault方法,与标准同步)
HTML结构:两个结构分别调用两个方法
<a href="http://www.baidu.com" id="turnBaidu">return false;</a> <a href="http://www.google.com" id="turnGoogle">preventDefault();</a>
JS代码:先看一下DOM0级事件处理程序中的取消默认行为
var a1 = document.getElementById("turnBaidu"), a2 = document.getElementById("turnGoogle"); a1.onclick = function(){ return false; } a2.onclick = function(event){ var e = event || window.event; if(e.preventDefault){ e.preventDefault(); //除IE6-8之外的浏览器(包括IE9) }else{ e.returnValue = false; //IE6-8 } }
点击查看Demo1查看效果
结论:DOM0级事件处理两种方法在所有浏览器下都可以阻止默认行为的发生
JS代码:再看一下DOM2级事件处理程序中的取消默认行为
var a1 = document.getElementById("turnBaidu"),a2 = document.getElementById("turnGoogle"); if(a1.addEventListener){ //All browsers except IE6-8 a1.addEventListener('click',function(){ return false; },false); a2.addEventListener('click',function(event){ var e = event || window.event; e.preventDefault(); },false) }else{ //IE6-8 a1.attachEvent('onclick',function(){ return false; }) a2.attachEvent('onclick',function(event){ var e = event || window.event; e.returnValue = false; }) }
点击查看Demo2查看效果
结论:DOM2级事件处理,在除IE6-8之外的浏览器下return false方法进行了跳转,没有阻止默认行为的发生,即执行addEventListener方法的浏览器在使用return false下没有阻止默认行为(IE9下添加了addEventListener方法)。event.preventDefault方法在任何事件处理下都可以阻止默认行为
JQuery与QWrap在事件绑定中的不同处理,点击查看Demo3查看效果:
QWrap在处理return false时进行了跳转,核心代码事件处理应用了addEventListener方法。JQuery在事件处理机制中应用了特殊队列处理,在处理return false的时候同时调用了preventDefault方法。
取消默认行为推荐标准提供的event.preventDefault方法,避免不同事件处理下的不兼容,勿乱用return false