event.preventDefault（）与返回false（无jQuery）

Question

我想知道是否event.preventDefault()和return false相同。

我做了一些测试，看来

例如，如果事件处理程序是使用旧模型添加的

elem.onclick = function(){

    return false;

};

然后，return false阻止默认操作，例如event.preventDefault()。

如果事件处理程序使用添加addEventListener，例如

elem.addEventListener(

    'click',

    function(e){

        return false;

    },

    false

);

然后，return false不要阻止默认操作。

所有浏览器的行为都一样吗？

event.preventDefault()和之间还有更多区别return false吗？

在哪里可以找到一些有关return false行为的文档（我在MDN中找不到）event.preventDefault()？

我的问题只是关于普通的javascript而不是jQuery，因此请不要将其标记为event.preventDefault（）与return false的重复，即使两个问题的标题几乎相同。

Answer 1

的W3C文档对象模型事件规范在1.3.1。事件注册接口指出，handleEventEventListener中没有返回值：handleEvent 每当发生事件类型为注册了EventListener接口的事件时，都会调用此方法。[...] 没有返回值根据1.2.4。事件取消文档还指出取消是通过调用Event的preventDefault方法来完成的。如果一个或多个EventListener在事件流的任何阶段调用preventDefault，则默认操作将被取消。这应该阻止您使用在任何浏览器中使用返回true / false可能产生的任何影响event.preventDefault()。更新资料HTML5规范实际上指定了如何对待不同的返回值。HTML规范的7.1.5.1节指出：如果返回值是WebIDL布尔值false，则取消该事件。除了“ mouseover”事件以外的所有事件。结论我仍然建议event.preventDefault()在大多数项目中使用，因为您将与旧规范兼容，从而与旧版浏览器兼容。仅当您只需要支持最新的浏览器时，返回false即可取消。

Answer 2

这里有一些例子，可以帮助人们更好地理解和解决他们的问题。TL; DRon*事件处理程序（例如onclick，按钮元素上的属性）：返回false以取消事件addEventListener是不同的API，返回值（例如false）将被忽略：use event.preventDefault()。onclick="<somejs>"有其自身的潜在困惑，因为<somejs>它包装在onclick函数的主体中。使用浏览器devtools getEventListenersAPI可以查看如果事件处理程序的行为异常，事件侦听器将如何解决。例此示例特定于click带有<a>链接的事件...但是可以推广到大多数事件类型。我们在类的锚点（链接）上js-some-link-hook要打开模式并防止发生任何页面导航。以下示例在MacOS Mojave上的Google Chrome（71）中运行。一个主要的陷阱是假定onclick=functionName与使用相同的行为addEventListeneronclick属性function eventHandler (event) {&nbsp; &nbsp; // want to prevent link navigation&nbsp; &nbsp; alert('eventHandler ran');&nbsp; &nbsp; return false;}function addEventListenerToElement () {&nbsp; &nbsp; var link = document.querySelector('.js-some-link-hook');&nbsp; &nbsp; link.setAttribute('onclick', eventHandler);}addEventListenerToElement();然后在浏览器devtools控制台中运行：var el = document.querySelector('a.js-some-link-hook'),&nbsp; &nbsp; &nbsp; &nbsp; listener = getEventListeners(el).click[0].listener;&nbsp; &nbsp; console.log(''+listener); // to avoid truncation of output...您会看到：function onclick(event) {function t(n){return alert("eventHandler ran"),!1}}这根本不起作用。使用onclick=处理程序函数时，它会包装在另一个函数中。在这种情况下，您可以看到包含但未调用我的函数定义，因为我在不调用它的情况下指定了函数引用。此外，您还可以看到，即使调用了我的函数并且我的函数返回了false，onclick函数也不会返回该false值……这是“取消”事件所必需的。我们确实需要return myHandlerFunc();将其封装在onclick函数中才能正常工作。现在我们知道了它是如何工作的，我们可以修改代码以执行我们想要的任何事情。出于说明目的的奇怪示例（请勿使用此代码）：function eventHandler (event) {&nbsp; &nbsp; // want to prevent link navigation&nbsp; &nbsp; alert('eventHandler ran');&nbsp; &nbsp; return false;}function addEventListenerToElement () {&nbsp; &nbsp; var link = document.querySelector('.js-some-link-hook');&nbsp; &nbsp; link.setAttribute('onclick', 'return ('+eventHandler+')();');}addEventListenerToElement();您会看到我们已将eventHandler函数定义包装到字符串中。特别是：一个自执行函数，在前面有一个return语句。再次在chrome devtools控制台中：var el = document.querySelector('a.js-some-link-hook'),&nbsp; &nbsp; &nbsp; &nbsp; listener = getEventListeners(el).click[0].listener;&nbsp; &nbsp; console.log(''+listener); // to avoid truncation of output...显示：function onclick(event) {return (function t(e){return alert("eventHandler ran"),!1})();}...是的，那应该起作用。我们的return false（!1由于运行缩图，对不起）。果然，如果我们单击链接，我们将收到警报，并关闭该警报，该页面将不会在任何地方导航或刷新。addEventListenerfunction eventHandler (event) {&nbsp; &nbsp; // want to prevent link navigation&nbsp; &nbsp; alert('eventHandler ran');&nbsp; &nbsp; return false;}function addEventListenerToElement () {&nbsp; &nbsp; var link = document.querySelector('.js-some-link-hook');&nbsp; &nbsp; link.addEventListener('click', eventHandler, false);}addEventListenerToElement();浏览器devtools：var el = document.querySelector('a.js-some-link-hook'),&nbsp; &nbsp; &nbsp; &nbsp; listener = getEventListeners(el).click[0].listener;&nbsp; &nbsp; console.log(''+listener); // to avoid truncation of output结果：function e(n){return alert("eventHandler ran"),!1}这样您已经可以看到区别。我们没有包装在onclick函数中。因此，我们return false（return !1由于最小化）位于此处的顶层，我们不必担心像以前一样添加额外的return语句。因此，看起来它应该工作。单击链接，我们会收到警报。解除警报，页面导航/刷新。 即该事件未通过返回false取消。如果我们查看规范（请参阅底部的资源），则会发现addEventListener的回调/处理函数不支持返回类型。我们可以返回我们想要的任何东西，但是由于它不是接口的一部分，因此没有任何作用。解决方案：使用event.preventDefault()代替return false;...function eventHandler (event) {&nbsp; &nbsp; // want to prevent link navigation&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; alert('eventHandler ran');}function addEventListenerToElement () {&nbsp; &nbsp; var link = document.querySelector('.js-some-link-hook');&nbsp; &nbsp; link.addEventListener('click', eventHandler, false);}addEventListenerToElement();浏览器devtools ...var el = document.querySelector('a.js-some-link-hook'),&nbsp; &nbsp; &nbsp; &nbsp; listener = getEventListeners(el).click[0].listener;&nbsp; &nbsp; console.log(''+listener); // to avoid truncation of output给...function n(e){e.preventDefault(),alert("eventHandler ran")}...符合预期测试：得到警报。解除警报。 没有页面导航或刷新...这就是我们想要的。资源资源https://www.w3.org/TR/dom41/#dom-eventtarget-addeventlistener事件注册（例如addEventListener）https://www.w3.org/TR/dom41/#callbackdef-eventlistener回调/处理程序/侦听器定义注意返回类型为void。即返回值不是接口的一部分，并且无效。https://www.w3.org/TR/dom41/#event事件对象（例如Event.preventDefault）html5规范（https://www.w3.org/TR/html5/webappapis.html#events）使事情变得混乱，因为它们在示例中同时使用onclick和addEventListener，并且它们表示以下内容：事件处理程序H和事件对象E的事件处理程序处理算法如下：...处理返回值如下：...如果返回值是Web IDL布尔值false，则取消该事件。因此，它似乎暗示，return false取消两个事件addEventListener和onclick。但是，如果您查看它们的链接定义，event-handler则会看到：事件处理程序具有一个名称，该名称始终以“ on”开头，后跟要使用的事件的名称。...事件处理程序以两种方式之一公开。所有事件处理程序共有的第一种方法是作为事件处理程序IDL属性。第二种方法是作为事件处理程序的内容属性。HTML元素上的事件处理程序和Window对象上的某些事件处理程序都以这种方式公开。https://www.w3.org/TR/html5/webappapis.html#event-handler因此，似乎return false取消事件确实仅适用于onclick（或通常on*）事件处理程序，而不适用于通过addEventListener不同API 注册的事件处理程序。由于html5规范未涵盖addEventListener API，而仅on*事件处理程序未涵盖...如果它们坚持示例中的内容并明确指出差异，则不会造成混淆。

Answer 3

preventDefault，stopPropogation和return false之间的区别默认操作–引发控制事件时的服务器端操作。假设我们有div控件，并且在其中有一个按钮。因此div是按钮的父控件。我们有按钮的客户端单击和服务器端单击事件。另外，我们还有div的客户端点击事件。在客户端上单击按钮的事件时，我们可以使用以下三种方式控制父控件和服务器端代码的操作：return false-这仅允许控件的客户端事件。不会触发父控件的服务器端事件和客户端事件。preventDefault()-这允许控件的客户端事件及其父控件。服务器端事件，即。控件的默认操作不会触发。stopPropogation()–这允许控件的客户端和服务器端事件。不允许控件的客户端事件。