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