通过点击事件侦听器获取嵌套元素的属性值

Question

在JavaScript构建中，我有一个超链接，用户可以单击它来发送消息。单击此链接时，anchor tag上的属性将发送到click event listener，后者使用这些属性值来填充消息的部分(消息来自何处等)

问题：anchor tag包含嵌套的<svg>元素(小图像)。如果用户点击锚文本，没问题，消息会用属性数据发送。但是，如果用户单击锚文本旁边的<svg>图像，则不会发送这些属性，从而导致错误：

锚点标签：

<a class="my-anchor-class"
my-attribute-id="{{ thing.id }}"
my-attribute-title="{{ thing.title }}""
href="#myHref">
<svg>
<use xlink:href="#myMessageSvg"/>
</svg>    
Send Me A Message
</a>

点击事件监听器：

document.addEventListener('click', function (event) {
var myElement = event.target;
if (myElement.classList.contains('my-anchor-class')) {
event.preventDefault();
var myId = stripTheHtml(myElement.getAttribute('my-attribute-id'));
var myTitle = stripTheHtml(myElement.getAttribute('my-attribute-title'));
messages.setAttribute('action', MY_ACTION + myId);
messagesTitle.innerHTML = 'Re: ' + myTitle;
}
});

单击<a>的Send Me A Message文本时，一切正常。但是，如果单击<svg>图像，则不会发送属性值，并且操作失败。我尝试将<a>中的相同属性和类添加到<svg>元素中，但没有成功——仍然是相同的错误。有人知道如何点击我的<svg>图像，使其与点击其父级的<a>文本一样工作吗？

Answer 1

检查元素tagName的事件目标。如果它不是"A"，请使用目标的父元素作为源。否则，目标必须是正确的元素。

注意，我在锚标记本身上设置了事件处理程序。

document.querySelector('.my-anchor-class').addEventListener('click', function(event) {
event.preventDefault();
let myElement = event.target;
while (myElement.tagName !== 'A') {
myElement = myElement.parentElement;
}
console.log(myElement.getAttribute('my-attribute-id'));
});

<a class="my-anchor-class" my-attribute-id="thing.id" my-attribute-title="thing.title" href="#myHref">
<svg version="1.1" baseProfile="full" width="75" height="75" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black" />
<circle cx="0" cy="0" r="60" fill="blue" />
</svg> Send Me A Message
</a>