zoukankan      html  css  js  c++  java
  • 原生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属性。

  • 相关阅读:
    Webbrowser中模拟连接点击(非鼠标模拟)
    用DDE控制Word
    禁止用键盘左右箭头,去切换PageControl页签
    Delphi实现全局鼠标钩子
    Delphi实现软件中登录用户的操作权限
    根据数据库结构生成TreeView
    根据字符串找到函数并执行
    用DLL实现插件的简单演示
    Delphi:窗体的扩展样式GWL_EXSTYLE用于SetWindowLong
    FastReport问题整理(http://129.sqdj.gov.cn/?p=77)
  • 原文地址:https://www.cnblogs.com/qiuyuntao/p/3703578.html
Copyright © 2011-2022 走看看