事件绑定中的return false、preventDefault【转】

——–关于取消默认行为不同方法在不同的事件绑定中的不同反应

在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