通过addEventListener添加click事件以确认从超链接导航

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