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

这里有一些例子，可以帮助人们更好地理解和解决他们的问题。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) {    // want to prevent link navigation    alert('eventHandler ran');    return false;}function addEventListenerToElement () {    var link = document.querySelector('.js-some-link-hook');    link.setAttribute('onclick', eventHandler);}addEventListenerToElement();然后在浏览器devtools控制台中运行：var el = document.querySelector('a.js-some-link-hook'),        listener = getEventListeners(el).click[0].listener;    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) {    // want to prevent link navigation    alert('eventHandler ran');    return false;}function addEventListenerToElement () {    var link = document.querySelector('.js-some-link-hook');    link.setAttribute('onclick', 'return ('+eventHandler+')();');}addEventListenerToElement();您会看到我们已将eventHandler函数定义包装到字符串中。特别是：一个自执行函数，在前面有一个return语句。再次在chrome devtools控制台中：var el = document.querySelector('a.js-some-link-hook'),        listener = getEventListeners(el).click[0].listener;    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) {    // want to prevent link navigation    alert('eventHandler ran');    return false;}function addEventListenerToElement () {    var link = document.querySelector('.js-some-link-hook');    link.addEventListener('click', eventHandler, false);}addEventListenerToElement();浏览器devtools：var el = document.querySelector('a.js-some-link-hook'),        listener = getEventListeners(el).click[0].listener;    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) {    // want to prevent link navigation    event.preventDefault();    alert('eventHandler ran');}function addEventListenerToElement () {    var link = document.querySelector('.js-some-link-hook');    link.addEventListener('click', eventHandler, false);}addEventListenerToElement();浏览器devtools ...var el = document.querySelector('a.js-some-link-hook'),        listener = getEventListeners(el).click[0].listener;    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*事件处理程序未涵盖...如果它们坚持示例中的内容并明确指出差异，则不会造成混淆。

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

3回答