原生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属性。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM