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

Question

我正在编写一些 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 />

Answer 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/)

Answer 2

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

请参阅 如何使用 Javascript 的 addEventListener()覆盖 HTML 表单的默认 Submit() 行为

--编辑--

我们，我在编辑答案时看到您已经回答了自己

Answer 3

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

经过更多搜索，我在 Stack Overflow 上找到了答案：从点击处理程序返回 false 在 Firefox 中不起作用

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

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