关于js中return false、event.preventDefault()和event.stopPropagation()区别，以及阻止事件冒泡和阻止默认事件

在平时项目中，如果遇到需要阻止浏览器默认行为，大家经常会用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
   } 
}

关于js中return false、event.preventDefault()和event.stopPropagation()区别，以及阻止事件冒泡和阻止默认事件

猜你喜欢