我正在尝试实现一个简单的(-ish)路由器作为练习。但是，我无法检测 anchor 点击。理想情况下，我想在 URL 更改时拦截事件(不使用哈希)，但现在我只想拦截任何 anchor 击事件。
这是我到目前为止尝试过的:
HTML
<nav id="mainMenu">
<ul id="navlinks">
<li>
<a href="/">
<span>HOME</span>
</a>
</li>
<li>
<a href="/posts">
<span>POSTS</span>
</a>
</li>
</ul>
</nav>
单独的JS文件
function intercept(event)
{
console.log("triggered");
var tag = event.target;
if (
tag.tagName.toUpperCase() === 'A' &&
tag.href &&
event.button == 0 &&
tag.origin == document.location.origin
){
event.preventDefault();
console.log("default prevented")
}
}
使用这段代码，我只检测到 span事件，而不是 <a>事件。我该怎么做才能使用 vanilla JS(如果可能)检测 anchor 击事件？我也希望能够检测动态创建的 anchor 。
编辑 1: 更改了 JS 函数。控制台打印 default prevented: SPAN :
function intercept(event)
{
console.log("triggered");
var tag = event.target;
//if (
// tag.tagName === 'A'
//){
event.preventDefault();
console.log("default prevented: " + tag.tagName);
//}
}
编辑 2: anchor 标记并不总是有子标记，并且可能的子标记可能不是 span。 .
最佳答案
您需要做的就是从 event.target 中“沿着文档树向上走”元素，直到找到 anchor 标记。
此解决方案的优势在于它利用事件委托(delegate)，并且可以在页面生命周期的任何时间点运行。 document.documentElement属性是 <html>标记，它在 JavaScript 开始执行时就存在。
function findParentByTagName(element, tagName) {
var parent = element;
while (parent !== null && parent.tagName !== tagName.toUpperCase()) {
parent = parent.parentNode;
}
return parent;
}
function handleAnchorClick(event) {
event = event || window.event;
if (findParentByTagName(event.target || event.srcElement, "A")) {
event.preventDefault();
console.log("An anchor was clicked!");
}
}
document.documentElement.addEventListener("click", handleAnchorClick, false);<p>
<a href="#">
<span>
<b>
<i>Click me!</i>
</b>
</span>
</a>
</p>
<p>
<a href="#">Click me too!</a>
</p>关于javascript - 从可能包含子项的 anchor 标记中监听所有 "onClick"事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32530263/