在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false; 和event.preventDefault()来阻止, 但对它俩的区别还是模糊,这里顺便带上event.stopPropagation()一起区分下。
事件处理程序的返回值只对通过属性注册的处理程序才有意义,如果我们未通过addEventListener()函数来绑定事件的话,若要禁止默认事件,用的就是return false; 但如果要用addEventListener()或者attachEvent()来绑定,就要用preventDefault()方法或者设置事件对象的returnValue属性。
HTML5 Section 6.1.5.1 of the HTML Spec规范定义如下:
Otherwise
If return value is a WebIDL boolean false value, then cancel the event.
如果返回值是一个WebIDL布尔值假值,则取消该事件。
而H5规范中为什么要OtherWise来强调return false,因为规范中有指出在mouseover等几种特殊事件情况下,return false;并不一定能终止事件。所以,**在实际使用中,我们需要尽量避免通过return false;的方式来取消事件的默认行为。 **
event.stopPropagation(); // 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件仍然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开
event.preventDefault(); // 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
return false; 事这个方法比较暴力,他会同时阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()。
在jQuery中使用return false时,相当于同时使用event.preventDefault和event.stopPropagation,它会阻止冒泡也会阻止默认行为。 但是使用原生js写时,return false只会阻止默认行为。(return false 不能用于节点直接onclick绑定函数)
event.preventDefault()方法并不被ie支持,在ie下需要用window.event.returnValue = false; 来实现。一般都是这样写,代码如下:
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //支持DOM标准的浏览器
} else {
window.event.returnValue = false; //IE
复制代码