这里有几个例子可以帮助人们更好地理解和解决他们的问题。
TL;博士
on*事件处理程序（例如onclick按钮元素上的属性）：返回 false 以取消事件addEventListener是不同的 API，返回值（例如false）被忽略：使用event.preventDefault().onclick="<somejs>"有其自身潜在的混乱，因为<somejs>它被包装在 onclick 函数的主体中。getEventListeners如果您的事件处理程序未按预期运行，请使用浏览器 devtools API 查看您的事件侦听器如何进行故障排除。
例子
此示例特定于click带有<a>链接的事件......但可以概括为大多数事件类型。
我们有一个带有类的锚（链接）js-some-link-hook，我们想要打开一个模式并防止任何页面导航发生。
以下示例在 MacOS Mojave 上的 google chrome (71) 中运行。
一个主要的陷阱是假设这onclick=functionName是与使用相同的行为addEventListener
假设我们有一个锚标记（链接），当启用 javascript 时，我们想用 javascript 处理它。我们不希望浏览器在单击时跟随链接（“防止默认”行为）。
<a href="https://www.example.com/url/to/go/to/when/no/javascript"
class="js-some-link-hook">click me!</a>
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', 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 eventHandler (event) {alert('eventHandler ran'); return false;}
}
这根本行不通。当使用onclick=你的处理函数时，它被包裹在另一个函数中。
您可以看到我的函数定义被包含但没有被调用，因为我指定了函数引用而没有调用它。即我们不需要onclick="functionName()"确保onclick="functionName"在functionName单击元素时运行。
此外，您可以看到，即使调用了我的函数并且我的函数返回了 false...该onclick函数不会返回该 false 值...这是“取消”事件所必需的。
为了解决这个问题，我们可以将其设置onclick为return myHandlerFunc();确保从 .onclick返回返回值 (false) myHandlerFunc。
您也可以删除return false;frommyHandlerFunc并将其更改为onclick，myHandlerFunc(); return false;但这没有多大意义，因为您可能希望将逻辑保持在您的处理程序函数中。
请注意，onclick使用 javascript设置时，当您onclick直接在 html 中设置而不是使用 javascript（如我的示例）时，onclick属性值是字符串类型并且一切正常。如果您onclick使用javascript进行设置，则需要注意类型。如果您说element.setAttribute('onclick', myHandlerFunc()) myHandlerFunc将立即运行并且结果将存储在属性中...而不是在每次单击时运行。相反，您应该确保将属性值设置为字符串。 element.setAttribute('onclick', 'return myHandlerFunc();')
现在我们看到了它是如何工作的，我们可以修改代码来做任何我们想做的事情。用于说明目的的奇怪示例（不要使用此代码）：
function eventHandler (e) {
// want to prevent link navigation
alert('eventHandler ran');
console.log(e);
return false;
}
function addEventListenerToElement () {
var link = document.querySelector('.js-some-link-hook');
link.setAttribute('onclick', 'return ('+eventHandler+')(event);');
}
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 eventHandler (e) {
// want to prevent link navigation
alert('eventHandler ran');
console.log(e);
return false;
})(event);
}
......所以是的，这应该工作。果然，如果我们单击链接，我们会收到警报并关闭该页面无法导航或刷新的警报。
onclick关于...的另一个注意事项如果您想event在事件发生时接收和使用参数，您应该注意它被命名为“事件”。您可以使用名称在处理程序中访问它event（可通过父onclick函数范围获得）。或者您可以构建您的处理程序以event作为参数（更适合测试）...例如onclick="return myEventHandler(event);"，或者如您在前面的示例中看到的那样。
添加事件监听器
function eventHandler (ev) {
// want to prevent link navigation
alert('eventHandler ran');
console.log(ev);
return false;
}
function addEventListenerToElement () {
var link = document.querySelector('.js-some-link-hook');
link.addEventListener('click', eventHandler, false);
}
addEventListenerToElement();
浏览器开发工具：
var el = document.querySelector('a.js-some-link-hook'),
listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output
结果：
function eventHandler (ev) {
// want to prevent link navigation
alert('eventHandler ran');
console.log(ev);
return false;
}
所以你已经可以看出区别了。addEventListener我们没有被包裹在一个函数onclick中。我们的处理程序直接接收event参数（因此我们可以随意调用它）。此外，我们return false在这里处于“顶级”状态，我们不必担心添加额外的 return 语句，例如 with onclick。
所以看起来它应该工作。单击链接，我们会收到警报。关闭警报，页面导航/刷新。 即事件没有通过返回false来取消。
如果我们查找规范（参见底部的资源），我们会看到 addEventListener 的回调/处理函数不支持返回类型。我们可以返回任何我们想要的，但由于它不是浏览器 API/接口的一部分，它没有任何效果。
解决方案：使用event.preventDefault()代替return false;...
function eventHandler (ev) {
// want to prevent link navigation
ev.preventDefault();
alert('eventHandler ran');
}
function addEventListenerToElement () {
var link = document.querySelector('.js-some-link-hook');
link.addEventListener('click', eventHandler, false);
}
addEventListenerToElement();
浏览器开发工具...
var el = document.querySelector('a.js-some-link-hook'),
listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output
给...
function eventHandler (ev) {
// want to prevent link navigation
ev.preventDefault();
alert('eventHandler ran');
}
...正如预期的那样。
再次测试：
- 点击链接。
- 得到警报。
- 解除警报。
- 没有页面导航或刷新发生......这是我们想要的。
因此，addEventListener使用event.preventDefault()as 返回 false 什么也不做。
资源
html5 规范（https://www.w3.org/TR/html5/webappapis.html#events）混淆了事情，因为他们在他们的例子中都使用了onclick，addEventListener他们说如下：
一个事件处理器H和一个Event对象E的事件处理器处理算法如下：
...
- 处理返回值如下：
...
如果返回值为 Web IDL boolean 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 注册的事件处理程序。
由于addEventListenerhtml5 规范（仅事件处理程序）未涵盖 API ……如果他们坚持示例中的样式事件处理程序，on*则不会那么混乱。on*
