通过 addEventListener 添加点击事件以确认从超链接导航答案

【问题标题】：Adding click event via addEventListener to confirm navigation from a hyperlink通过 addEventListener 添加点击事件以确认从超链接导航
【发布时间】：2021-03-24 07:11:45
【问题描述】：

我正在编写一些 JavaScript，我基本上想要做的是确认用户点击他们确实想要点击的链接。

我的代码目前如下所示：

var Anchors = document.getElementsByTagName("a");

for (var i = 0; i < Anchors.length ; i++)
{
    Anchors[i].addEventListener("click", function () { return confirm('Are you sure?'); }, false);
}

此代码显示了我希望看到的确认框，但随后导航到链接，而不管确认框中按下的按钮。

我相信这个问题与我对addEventListener 的使用有关（或它的实现限制），因为如果我在 HTML 文件中手动添加写入以下内容，那么行为正是我所期望的：

<a href="http://www.google.com" onclick="return confirm('Are you sure?')">Google</a><br />

【问题讨论】：

添加您的解决方案作为答案，并接受它。 :-)
显然我无法在 8 小时内发布我自己的问题的答案？如果它对其他用户更有用作为答案，我会在允许时回来回答，谢谢。
好吧，它可以阻止你的问题没有得到解答，而且（你永远不知道）你可能会得到支持！
OP 已停用多年，已将解决方案移至社区 wiki 的答案

标签： javascript hyperlink dom-events addeventlistener

【解决方案1】：

我更改了您的 onclick 函数以包含对 event.preventDefault() 的调用，它似乎可以正常工作：

var Anchors = document.getElementsByTagName("a");

for (var i = 0; i < Anchors.length ; i++) {
    Anchors[i].addEventListener("click", 
        function (event) {
            event.preventDefault();
            if (confirm('Are you sure?')) {
                window.location = this.href;
            }
        }, 
        false);
}

（见http://jsfiddle.net/ianoxley/vUP3G/1/）

【讨论】：

始终运行 preventdefault 然后更改 window.location 是否比我在编辑中实现它的方式具有速度优势？另外，我以前从未听说过 jsfiddle.net，所以也谢谢你，看起来很有用。
@Andy - 不，我认为不会有任何速度优势
仅供参考 addEventListener developer.mozilla.org/en-US/docs/Web/API/…

【解决方案2】：

你必须阻止默认事件处理程序的执行。

见How to use Javascript's addEventListener() to override an HTML Form's default submit() behavior

--编辑--

我们会，我看到你在我编辑答案时自己回答了

【讨论】：

【解决方案3】：

_{从原始海报问题中提取的解决方案}

经过一番搜索，我在 Stack Overflow 上找到了答案：Returning false from click handler doesn't work in Firefox

如果有人发现这个问题而不是另一个问题，基本上在使用addEventListener连接事件的方法时，你不能只使用return false；要取消操作，您必须改用事件的preventDefault() 方法，所以我上面的代码现在变成了：

Anchors[i].addEventListener("click", function (event) { 
    if (!confirm('Are you sure?')) { event.preventDefault(); } 
}, false);

【讨论】：