js取消默认事件行为

常见的默认行为有,点击链接后,浏览器跳转到指定页面;再比如<form>表单元素的"submit"事件,当我们触发表单的提交事件时,就可以提交当前表单。

关于取消默认行为的属性包括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属性 针对的不是同一回事。


JQuery的写法:

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

$("a").click(function(event){
  event.preventDefault();
});
文章目录
  1. 1. preventDefault()
  2. 2. returnValue
    1. 2.1. // 如果不用到DOM0,考虑兼容:
  3. 3. return false
  4. 4. cancelable
  5. 5. defaultPrevented
  6. 6. JQuery的写法:
|