版权声明: https://blog.csdn.net/xiasohuai/article/details/84303859
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用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()
例如:
想要禁止右键,是有自己的一个事件,叫做oncontextmenu。(oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。)
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
}, false);
document.oncontextmenu = function(event) {
return false;
}
附:
event.preventDefault()方法并不被ie支持,在ie下需要用window.event.returnValue = false; 来实现。一般都是这样写,代码如下:
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //支持DOM标准的浏览器
} else {
window.event.returnValue = false; //IE
}
}