原生JS事件中，return false 和 preventDefault() 的区别

前几天有同学问我，如果在页面上禁止右键。一听到这个，我的第一个想法就是右键弹出来的菜单应该是浏览器的默认事件，是不是可以根据按键的类型来判断是点击了右键，然后静止默认事件来做。

document.addEventListener('click', function(event) {
	if (event.button == 2) {
		event.preventDefault();
	}
}, false);

当时，我就是这么做的，但是很快的发现，完成不是这么回事。

想要禁止右键，是有自己的一个事件，叫做oncontextmenu。在《Javascript权威指南》这本书上是这么介绍这个事件的可以取消的事件，当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单，所以这个事件也可以像click事件那样使用。

So，我当时就直接问了方便，直接就用属性来绑定了事件

document.oncontextmenu = function(event) {
    event.preventDefault();
}

然后，发现这么做是完全没有效果的。很纳闷，后面就用了

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
}, false);

这么做之后，发现就ok了。

这个时候，就在想，为什么之前直接用属性绑定事件是不行的。后面我把代码改成了

document.oncontextmenu = function(event) {
    return false;
}

这个时候，也是可以了。然后就再想，这个return false 和 event.preventDefault()有什么去呗。去google一搜，全都是说return false = event.preventDefault() + stop.stopPropagation()。我去尝试了一下，发现完全不是这么回事。再仔细一看，那帮人问的是在jquery的情况下是怎么样的。然后我继续搜，发现都在讲jquery。

最后我找了权威指南的书仔细看了下，发现了答案。

事件处理程序的返回值只对通过属性注册的处理程序才有意义。也就是说如果我们是直接不通过addEventListener()函数来绑定事件的话，我们要禁止默认事件的话，用的就是return false。

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

转载于:https://www.cnblogs.com/qiuyuntao/p/3703578.html