Question

我有以下代码无效

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”类的按钮添加了一个点击事件，现在这不起作用，因为return false如果使用AddEventListener添加，则不会取消事件，我被建议使用event.preventDefault()代替，但这不是一个选项，因为我不使用jQuery。我只使用纯JavaScript。

那么，为什么返回false不能与AddEventListener一起使用，是否有event.preventDefault();的纯javascript替换？

Answer 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()添加的事件处理程序。我无法说出为什么原始设计师做出了这样的选择，但事实就是这样。

为什么返回false不适用于AddEventListener以及什么是Javascript替换preventDefault（）？

1 个答案: