Javascript 通过 addEventListener 添加点击事件以确认从超链接导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6041593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding click event via addEventListener to confirm navigation from a hyperlink
提问by Andy
I am writing some JavaScript that what I essentially want to do is confirm when a user clicks a link that they do actually want to click it.
我正在编写一些 JavaScript，我本质上想要做的是确认当用户单击他们确实想要单击的链接时。
My code currently looks like this:
我的代码目前看起来像这样：
var Anchors = document.getElementsByTagName("a");
for (var i = 0; i < Anchors.length ; i++)
{
Anchors[i].addEventListener("click", function () { return confirm('Are you sure?'); }, false);
}
This code displays the confirm box as I would expect to see it, but then navigates to the link regardless of the button pressed in the confirm box.
这段代码显示了我希望看到的确认框，但无论按下确认框中的按钮如何，都会导航到链接。
I believe the problem is related to my usage of the addEventListener(or a limitation of the implementation of it) because if I add manually write the following in a HTML file, the behaviour is exactly what I would expect:
我相信这个问题与我对addEventListener（或它的实现的限制）的使用有关，因为如果我在 HTML 文件中手动添加以下内容，则行为正是我所期望的：
<a href="http://www.google.com" onclick="return confirm('Are you sure?')">Google</a><br />
回答by Ian Oxley
I changed your onclickfunction to include a call to event.preventDefault()and it seemed to get it working:
我更改了您的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);
}
回答by Toni Toni Chopper
You have to prevent the execution of the default event handler.
您必须阻止执行默认事件处理程序。
See How to use Javascript's addEventListener() to override an HTML Form's default submit() behavior
请参阅如何使用 Javascript 的 addEventListener() 来覆盖 HTML 表单的默认 submit() 行为
--EDIT--
- 编辑 -
We'll, I've seen you've answered yourself while I was editing the answer
我们会的，我已经看到你在我编辑答案时自己回答了
回答by brasofilo
Solution pulled from Original Poster question
从原始海报问题中提取的解决方案
After some more searching I have found the answer here on Stack Overflow: Returning false from click handler doesn't work in Firefox
经过更多搜索，我在 Stack Overflow 上找到了答案：从点击处理程序返回 false 在 Firefox 中不起作用
In case anyone finds this question instead of the other, basically when using the addEventListenermethod of wiring events, you cant just use return false; to cancel the action, you must instead use the preventDefault()method of the event, so my code from above has now become:
如果有人发现这个问题而不是另一个问题，基本上在使用addEventListener连接事件的方法时，你不能只使用 return false；要取消操作，您必须改为使用preventDefault()事件的方法，所以我上面的代码现在变成了：
Anchors[i].addEventListener("click", function (event) {
if (!confirm('Are you sure?')) { event.preventDefault(); }
}, false);
