Javascript 返回已单击元素的子元素的jQuery click事件的event.target
我在包含图像的超链接上有一个jQuery单击事件。超链接和图像都有单独的ID。我希望当我单击超链接时,事件处理程序中的代码event.target.id会返回超链接id,因为事件绑定到超链接,但它会返回图像id。这是为什么?是否有任何方法可以始终使绑定到事件的元素成为event.target HTML: 另外,我知道可以通过将这个特定页面对象的linkId改为logo而不是home来快速修复这个问题,但这会有点让代码混乱。我想先看看是否还有其他选择 PSS。我还知道JS有实际的类,而不是我使用的基于函数的类。这与我的问题无关。event.target始终是发送事件的元素。如果单击容器中的元素,则无论侦听器附加到哪个元素,event.target都将是容器中的元素 如果要引用侦听器所附加到的元素,请使用此或event.currentTarget: $menu a.clickfunction{ console.logthis.id; //页面[linkToPageId[this.id]].loadPage; }; Om oss 康塞普 数据 布蒂克 您可以使用event.currentTarget,它指向附加到侦听器的元素。它不会随着事件冒泡而更改Javascript 返回已单击元素的子元素的jQuery click事件的event.target,javascript,jquery,html,events,jquery-events,Javascript,Jquery,Html,Events,Jquery Events,我在包含图像的超链接上有一个jQuery单击事件。超链接和图像都有单独的ID。我希望当我单击超链接时,事件处理程序中的代码event.target.id会返回超链接id,因为事件绑定到超链接,但它会返回图像id。这是为什么?是否有任何方法可以始终使绑定到事件的元素成为event.target HTML: 另外,我知道可以通过将这个特定页面对象的linkId改为logo而不是home来快速修复这个问题,但这会有点让代码混乱。我想先看看是否还有其他选择 PSS。我还知道JS有实际的类,而不是我使用的
希望这有帮助。你的措辞有误导性。实际上,Event.currentTarget在冒泡时会发生更改,Event.target则不会,因为它始终指向调度程序。
<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>
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();
});