event.target 的 jQuery 单击事件返回被单击元素的子元素

Question

我在包含图像的超链接上有一个 jQuery 单击事件。超链接和图像都有单独的 ids。我希望当我单击超链接时，事件处理程序中的代码 event.target.id 会 return 超链接 id 因为事件与超链接相关联，但它 returns 图片 id。这是为什么？有什么方法可以使与事件关联的元素始终成为 event.target?

HTML:

<div id="menuContainer">
    <ul id="menu">
        <li><a id="home"><img id="logo" src="img/logo.png" alt="logo"></a></li>
        <li><a id="about">Om oss</a></li>
        <li><a id="concept">Konsept</a></li>
        <li><a id="history">Data</a></li>
        <li><a id="store">Butikk</a></li>
    </ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>

JS:

function Page(pageId, linkId, file, backgroundImg, showPage){
    this.id = pageId;
    this.link = linkId;
    this.content = file;
    this.img = backgroundImg;
    this.show = showPage;

    this.loadPage = function() {
        if (this.show && $cont.is(":hidden")) $cont.show();
        else if (!this.show && $cont.is(":visible")) $cont.hide();
        if (this.content != "") $cont.load(this.content);
        else $cont.html("");
        $("#frontpage").css("backgroundImage", "url(img/" + this.img + ")");
    }
}

var pages = [];
var linkToPageId = {};

function addPage(linkId, file, backgroundImg, showPage = true) {
    var pageId = pages.length;
    var newPage = new Page(pageId, linkId, file, backgroundImg, showPage);
    pages.push(newPage);
    linkToPageId[linkId] = pageId;
}

addPage("home", "", "frontpage.jpg", false);

$("#menu a").click(function(event){
    console.log(event.target.id);
    pages[linkToPageId[event.target.id]].loadPage();
});

PS。我知道这可以通过将此特定 Page 对象的 linkId 更改为 "logo" 而不是 "home" 来快速修复，但它有点使代码变得面条化。我想先看看有没有别的选择

PSS。我也知道 JS 有实际的 Classes 而不是我使用的基于函数的 "class"。这与我的问题无关。

Answer 1

event.target 将始终是调度事件的元素。如果您单击容器内的元素，那么无论侦听器附加到哪个元素，event.target 都将是容器内的元素。

如果您想要引用监听器所附加的元素，请使用 this 或 event.currentTarget:

$("#menu a").click(function() {
  console.log(this.id);
  // pages[linkToPageId[this.id]].loadPage();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
  <ul id="menu">
    <li>
      <a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
    </li>
    <li><a id="about">Om oss</a></li>
    <li><a id="concept">Konsept</a></li>
    <li><a id="history">Data</a></li>
    <li><a id="store">Butikk</a></li>
  </ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>

$("#menu a").click(function() {
  console.log(event.currentTarget.id);
  // pages[linkToPageId[event.currentTarget]].loadPage();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
  <ul id="menu">
    <li>
      <a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
    </li>
    <li><a id="about">Om oss</a></li>
    <li><a id="concept">Konsept</a></li>
    <li><a id="history">Data</a></li>
    <li><a id="store">Butikk</a></li>
  </ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>

Answer 2

您使用 event.currentTarget 指向您附加侦听器的元素。它不会随着事件冒泡而改变。

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

希望这对您有所帮助。

Answer 3

有一个 CSS 技巧可以忽略设置规则的元素的悬停和单击事件：

#menu a img {
    pointer-events: none;
}

此规则将取消您对该元素的 :hover 规则（以及子元素，因为 CSS 的层叠之美）。

document
    .querySelectorAll("#menu a")
    .forEach(
        (element) => element.addEventListener(
            "click", 
            (event) => document.querySelector("#click-target").textContent = event.target.outerHTML
        )
    );

#menu a span.icon {
    pointer-events: none;
}
#menu a span:hover {
    color: #F0F;
    font-weight: 700;
}

<p>Try me by clicking on links or on the "checkbox" icons.</p>

<ul id="menu">
  <li><a href="#"><span class="icon">☑ </span> pointer-events: none</a>
  <li><a href="#"><span>☐ </span> No pointer-events rule</a>
</ul>

<div id="click-target"></div>

event.target 的 jQuery 单击事件返回被单击元素的子元素

event.target of a jQuery click event returning the child of the clicked element

html

javascript

jquery

events

jquery-events