Javascript 获取嵌套元素'；通过单击事件监听器获取属性值

在

JavaScript

build中，我有一个超链接，用户可以单击它发送消息。单击此链接时，该

锚定标记

上的属性将发送到

单击事件侦听器

，该侦听器使用这些属性值填充消息的部分（消息来自何处等）

问题：锚定标记

包含嵌套的
元素（小图像）。如果用户单击锚文本，则会发送带有属性数据的消息。但是，如果用户单击锚文本旁边的
图像，则不会发送这些属性，从而导致错误：

锚定标签：

 <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”，则使用目标的父元素作为源。否则，目标必须是正确的元素

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


document.querySelector（'.my anchor class'）.addEventListener（'click'，函数（事件）{
event.preventDefault（）；
让myElement=event.target；
while（myElement.tagName！==“A”）{
myElement=myElement.parentElement；
}
log（myElement.getAttribute（'my-attribute-id'）；
});