JQuery 链接 onClick 事件发送图像 - 如何获取链接对象？

Question

我在每个链接项上都有一个包含图像和文本的下拉列表。数据标签位于包含文本和图像的链接上。当我单击文本时，jQuery.fn.init 给了我预期的 a.dropdown-item，但是如果单击图像，它会给我图像对象而不是 a.dropdown-item 作为父项.

我以为我在函数调用中正确指定了过滤器，但显然不是 - 谁能指出我正确的方向？

下拉项目结构：

<a class="dropdown-item" href="/i18n/setlang/" data-nextpage="/ca" data-languagecode="ca">
<img src="/static/ca.png" class="d-inline-block align-middle pb-1" alt="" loading="lazy">
&nbsp;Català
</a> 

脚本开始：

$(document).ready(function() {

        $('#languagelist a').on('click', function(event) {
            event.preventDefault();
            let target = $(event.target);
            let nextpage = target.data('nextpage');
            let url = target.attr('href');
            let language_code = target.data('languagecode');
            .....

我认为指定“a”只会给我链接对象，但是当点击图像时，这就是目标（显然没有数据标签）。

非常感谢任何帮助:)

Answer 1

问题是因为事件的target 始终是 引发 事件的 DOM 树底部的元素，而不是 侦听 的元素事件。

要实现您的要求，您可以在 jQuery 事件处理函数中使用 event.currentTarget 或 this 引用，因为它们都引用了侦听器所附加的元素。试试这个：

jQuery($ => {
  $('#languagelist a').on('click', function(e) {
    e.preventDefault();
    
    // when clicking on the <img />
    console.log(this); // = <a />
    console.log(event.currentTarget); // = <a />
    console.log(event.target) // = <img />
  });
});

img {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="languagelist">
  <a class="dropdown-item" href="/i18n/setlang/" data-nextpage="/ca" data-languagecode="ca">
    <img src="/static/ca.png" class="d-inline-block align-middle pb-1" alt="" loading="lazy"> &nbsp;Català
  </a>
</div>