原生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

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

return true Java_[Java教程]js中return,return true,return false的用法及区别
[Java教程]js中return,return true,return false的用法及区别 0 2015-11-16 23:00:03 1.语法及返回方式 ①返回控制与函数结果语法为:retu ...
原生JS事件绑定的三种方式
JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
用JS写出JS事件中京东图片放大特效
图片放大特效准备两张相同的图片,小图和大图. 小图显示在商品的展示区域. 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域. 编写HTML页面,展示小图.隐藏鼠标的遮罩及大图. 当鼠标在小图 ...
js异步等待完成后再进行下一步操作_彻底搞懂JS事件中的循环机制 Event Loop
我们都知道JavaScript是单线程语言,就是因为单线程的特性,就不得不提js中的同步和异步一.同步和异步所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就 ...
screen,client,page三种确定鼠标坐标的区别和原生JS事件写法，区别于Jquery的$.on(x,y);和$.click()...
screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scre ...
原生js事件绑定和事件移除
/*** @description 事件绑定,兼容各浏览器* @param target 事件触发对象 * @param type 事件* @param func 事件处理函数*/ function ...
js输出中window.alert()和alert()的区别
本质上是一样的意思. 所有以window.开始的语句,都可以直接把window省略.只是在有些软件中,由于其编译器特性,当你写了window.的时候会自动的出现window的方法,所以window没必 ...
JS 中的return false的作用
在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为. Return False 就相当于终止符,终止默认的事件行为,反之,Return True 就相当于执行符,执行终止默认的事件行 ...

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

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

最新文章

热门文章