链接在具有 preventDefault 事件处理程序的元素内不起作用答案

【问题标题】：Links wont work inside element that have an event handler with preventDefault链接在具有 preventDefault 事件处理程序的元素内不起作用
【发布时间】：2014-07-08 21:39:46
【问题描述】：

假设我有这样的设置：

<div>
    <a href="http://www.google.com/">hi</a>
</div>

由于某种原因，我必须在 div 上有一个调用 preventDefault() 的事件处理程序。在 Chrome（可能还有其他浏览器）中，这会破坏该 div 内的链接。我不能再左键点击它们，点击链接的唯一方法是右键点击并在新标签页中打开。

我能想到的唯一解决方案是在这个 jsfiddle 中： http://jsfiddle.net/QB698/

但是这个解决方案看起来太恶心了。有没有更好的方法来解决这个问题，所以我不必向每个可能位于带有 preventDefault 处理程序的 div 中的单个链接添加事件？

谢谢。

【问题讨论】：

如果您实际上不想这样做，解决方案是不要打电话给.preventDefault()。 “出于某种原因”……什么原因？
是的，你需要什么理由来阻止Default()？它的全部目的是防止链接转到新页面？如果您希望链接转到新页面，请不要阻止Default()
不太清楚为什么......我目前正在调试别人的代码，情况有点复杂......他们声称这是必要的，因为当您单击按钮打开弹出窗口时（ div 在我们的例子中）事件冒泡到弹出窗口，然后再次关闭它。所以也许他们应该检查事件中的目标。

标签： javascript html dom

【解决方案1】：

我想你可以stopPropagation在事件的捕获阶段点击事件。那么你就不必为每个子链接绑定点击事件了：

document.getElementById("asd").addEventListener("click", function(e) {
    e.stopPropagation();
}, true);

演示：http://jsfiddle.net/QB698/1/

【讨论】：

这很好用......但就像其他评论所说的那样，我们应该真正考虑是否需要防止默认值。我认为在我的情况下，在我单击打开弹出窗口的链接后，它也阻止了哈希值出现在 URL 中。所以也许我不需要使用链接......有很多不同的路线需要考虑。