考古：js取消默认事件行为

常见的默认行为有，点击a标签链接后，浏览器跳转到指定页面；再比如<form>表单元素的"submit"事件。

提示：本文章内容成篇于2017年07月，部分内容可能已经过时

IE被废弃之前，同一个命令有不同的写法，而且为了满足兼容性导致处理方式错综复杂，所以重度依赖jquery来简化；

2022年IE被废弃之后，编写这个单一的命令变简洁了很多。历史前后形成鲜明对比。

关于取消默认行为的属性包括cancelable、defaultPrevented、preventDefault()和returnValue。

而“return false”这种方式不算是属性，我们后面会介绍到。

作为程序员，原本我们应该优先判别cancelable属性，

不过我们先拿preventDefault()、returnValue和“return false”这三者来讲：

在DOM0级事件处理程序中取消默认行为，这三者都有效；

在DOM2级事件处理程序中取消默认行为，使用“return false”无效;

在IE事件处理程序中取消默认行为，使用preventDefault()无效。

preventDefault()

preventDefault()方法取消浏览器对当前事件的默认行为，无返回值。（IE8-浏览器不支持该方法）

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick= function(e){
    e = e || event;
    e.preventDefault();
}
</script>

returnValue

returnValue属性可读写，默认值是true，但将其设置为false就可以取消事件的默认行为，与preventDefault()方法的作用相同。（firefox和IE9+浏览器不支持）

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick= function(e){
    e = e || event;
    e.returnValue = false;
}
</script>

// 如果不用到DOM0，考虑兼容：

在本文开头：

我们先拿preventDefault()、returnValue和“return false”这三者来讲：

在DOM0级事件处理程序中取消默认行为，这三者都有效；

在DOM2级事件处理程序中取消默认行为，使用“return false”无效;

在IE事件处理程序中取消默认行为，使用preventDefault()无效。

所以，如果不使用到DOM0，考虑兼容可以这么写：

(即，如果我们要用addEventListener()或者attachEvent()来绑定的话，就要用preventDefault()方法或者设置事件对象的returnValue属性。)

var handler = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault(); // 针对支持DOM标准的浏览器
    }else{
        e.returnValue = false; // 针对IE
    }
}

return false

除了以上方法外，取消默认事件还可以使用"return false"

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick= function(e){
    return false;
}
</script>

HTML5规范中有指出在mouseover等几种特殊事件情况下，return false;并不一定能终止事件。所以，在实际使用中，我们需要尽量避免通过"return false"的方式来取消事件的默认行为。

若使用的是jquery，“return false ”既会阻止默认行为，也会阻止事件的冒泡。 这样使用return false往往会造成意想不到的失误。

cancelable

cancelable属性返回一个布尔值，表示事件是否可以取消。

该属性为只读属性。返回true时，表示可以取消；返回false时，要么表示没有默认动作，要么表示不能阻止默认动作。（IE8-浏览器不支持cancelable属性）

这样来看，优先考虑到cancelable属性才是比较合理的逻辑顺序。

<a id="test" href="#">链接</a>
<script>
test.onclick= function(e){
    e = e || event;
    test.innerHTML = e.cancelable;
}
</script>

defaultPrevented

defaultPrevented属性表示默认行为是否被阻止，返回true时表示被阻止，返回false时，表示未被阻止。（IE8-浏览器不支持）

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick= function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    test.innerHTML = e.defaultPrevented; // defaultPrevented在这里用到
}
</script>

很明显 cancelable属性和 defaultPrevented属性，一个是说明“能不能”，而另1个表示的是状态。后者主要是方便debug的时候查询状态。

JQuery的写法：

JQuery的思想就是和原生的对应，并且作一定兼容：

$("a").click(function(event){
  event.preventDefault();
});

如果使用jQuery绑定的事件处理函数"return false"，jQuery也会阻止触发元素的默认行为。
- 若使用的是jquery，“return false ”既会阻止默认行为，也会阻止事件的冒泡。
- http://www.365mini.com/page/jquery-event-preventdefault.htm
使用 event.isDefaultPrevented() 方法来检查指定的事件上是否调用了 preventDefault() 方法。