Javascript 与子元素链接时的Vanilla JS target href

我试图将链接的

href

定位到某个类，但是当链接包含子元素时，

e.srceelement

的结果似乎取决于您在链接中单击的位置

如何定位父级的href

HTML元素

<a href="https://www.facebook.com/sharer/sharer.php?u=myshorturl" class="social-share">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="fill: #7f91a4;" class="at-icon at-icon-facebook"><g><path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path></g></svg>
    <span class="sr-only">Share This</span>
</a>

也许有更好的方法可以做到这一点，但您可以通过检查目标元素是否是您想要的，如果不是，则开始冒泡，直到找到为止。

比如：

document.querySelectorAll(".social-share").forEach( (e) => {
  e.addEventListener( "click", (ev) => {
    ev.preventDefault();
    let aElement = ev.target;
    while(!aElement.classList.contains("social-share"))
      aElement = aElement.parentElement;
    console.log(aElement);
  } )
});

这种方法有其危险性，与
while
循环相关联的“危险性”相同，但由于我们通过类上的查询选择操纵单击事件，只要嵌套的子类没有相同的类名，它将始终在侦听器设置为第一位的位置结束

您可以对代码执行同样的操作。我很喜欢queryselector，你可以很容易地推断出这个想法。
使用：


const icons=document.querySelectorAll（“.social share”）；
图标。forEach（功能（图标）{
图标。addEventListener（'click'，函数（e）{
//防止真的去Facebook
e、 预防默认值（）；
//检查currentTarget是否为图标
如果（此！==e.currentTarget）{
返回；
}
console.log（e.currentTarget.href）；
//在此处绑定图标，使函数中的'this'等于图标
}.bind（图标））；
});
。社交分享{
宽度：50px；
高度：50px；
显示：块；
边界半径：50%；
边框：1px纯黑；
}

在特定用例的上下文中，
lnk
变量的作用域是
forEach
调用闭包，并且仍然可以在事件处理程序中访问。
您可以访问回调…Doh'中的
lnk
变量。。。我现在觉得自己很愚蠢！它发生在每个人身上，☺如评论中所述，它们仍然引用了
lnk
。所有这些逻辑都是不必要的。在帖子后看到你的评论：-）为什么绑定它<代码>图标
的作用域为创建事件绑定的闭包。它仍然可以在事件处理程序中访问。就像在OP中一样，
lnk
是。
document.querySelectorAll(".social-share").forEach( (e) => {
  e.addEventListener( "click", (ev) => {
    ev.preventDefault();
    let aElement = ev.target;
    while(!aElement.classList.contains("social-share"))
      aElement = aElement.parentElement;
    console.log(aElement);
  } )
});

var shareButtons = document.getElementsByClassName("social-share");

Array.prototype.forEach.call(shareButtons, function (lnk) {
    lnk.addEventListener("click", function (e) {
        e.preventDefault();
        console.log(lnk.href);
    });    
});