返回被點擊元素的子元素的 jQuery 點擊事件的 event.target

Question

我在包含圖像的超鏈接上有一個 jQuery 單擊事件。 超鏈接和圖像都有單獨的id 。 我希望當我單擊超鏈接時，事件處理程序中的代碼event.target.id將返回超鏈接id因為事件與超鏈接相關聯，但它返回圖像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();
});

附注。 我知道這可以通過將這個特定Page對象的linkId更改為“logo”而不是“home”來快速修復，但它有點使代碼變得意大利面。 我想先看看有沒有其他選擇。

PSS。 我也知道 JS 有實際的Class es 而不是我使用的基於函數的“類”。 這與我的問題無關。

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>