通过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 />

- Andy

---

将您的解决方案作为答案添加，并接受它。 :-) - lonesomeday

看来我不能在8小时内回答自己的问题？如果我的回答对其他用户有用，我会在允许的时候回来回答，谢谢。 - Andy

好吧，这可以防止你的问题长时间未被回答，而且说不定你还能因此获得赞！ - lonesomeday

OP 已经不活跃了几年，将解决方案移动到答案作为社区维基。 - brasofilo

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/）

- Ian Oxley

---

在我的编辑中，始终运行preventdefault然后更改window.location是否具有速度优势？此外，我以前从未听说过jsfiddle.net，所以也谢谢你，看起来非常有用。 - Andy

@Andy - 不，我认为不会有任何速度优势。 - Ian Oxley

仅供参考，关于addEventListener的内容请访问以下链接：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener - chepe263

Answer 2

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

请参见如何使用JavaScript的addEventListener()覆盖HTML表单的默认submit()行为

--编辑--

好吧，我看到你在我编辑答案时已经回答了自己的问题。

- Toni Toni Chopper

Answer 3

_{解决方案来自原帖问题}

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

如果有人发现这个问题而不是其他问题，基本上当使用addEventListener方法连接事件时，您不能只使用return false;来取消操作，而必须使用事件的preventDefault()方法，因此我的上面的代码现在变成了：

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

- brasofilo