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

  • 相关阅读:
    jenkins安装
    HTTP协议客户端是如何向服务器发送请求
    接口概念
    fiddler导出har格式转化成yml格式

    双硬盘双系统装错了记录
    chrome的版本和driver版本对应表
    monkey详解
    adb命令熟悉
    cookie、session、token
  • 原文地址:https://www.cnblogs.com/qiuyuntao/p/3703578.html
Copyright © 2020-2023  润新知