为什么 return false 不适用于 AddEventListener 以及 Javascript 的 preventDefault() 替代品是什么？答案

【问题标题】：Why does return false not work with AddEventListener and what is Javascript's replacement for preventDefault()?为什么 return false 不适用于 AddEventListener 以及 Javascript 的 preventDefault() 替代品是什么？
【发布时间】：2015-03-27 19:36:45
【问题描述】：

我有以下代码不工作

var Settings = {
    addConfirmations: function() {
        var e = document.querySelectorAll(".bg-red");
        for (var t = 0; t < e.length; t++) {
            e[t].addEventListener("click", function() {
                var e = this.getAttribute("title");
                return Settings.confirmation(e)
            })
        }
    },
    confirmation: function(e) {
        if (e === null || e.toString().length === 0) {
            e = "Are you sure you want to proceed?"
        }
        return window.confirm(e);
    }
}
window.onload = Settings.addConfirmations();

这段代码为所有带有“bg-red”类的按钮添加了一个点击事件，现在这不起作用，因为如果使用AddEventListener添加，return false不会取消事件，建议我使用event.preventDefault()相反，但这不是一个选项，因为我不使用 jQuery。我只使用纯javascript。

那么，为什么 return false 不适用于 AddEventListener 并且有一个纯 JavaScript 替代 event.preventDefault();？

【问题讨论】：

是什么让你认为 event.preventDefault() 是 jquery 特有的？

标签： javascript events dom return addeventlistener

【解决方案1】：

event.preventDefault() 是标准 javascript 的一部分。

jQuery 也有它自己的覆盖版本，以便与以不同方式执行此操作的旧 IE 浏览器兼容，但在现代浏览器中，您可以直接在纯 javascript 中使用它。

所以event.preventDefault() 是取消添加.addEventListener() 的事件处理程序的默认行为的首选方式。

MDN documentation for event.preventDefault()

W3C specification for event.preventDefault()

return false 根本不是addEventListener() 的功能。它适用于在 HTML 中指定的具有onclick=... 等属性的事件处理程序，但不适用于使用addEventListener() 添加的事件处理程序。我无法解释为什么最初的设计师会做出这个选择，但事实就是如此。

【讨论】：