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

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

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

- 编辑 -

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

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

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

3 个答案: