我在包含图像的超链接上有一个jQuery click事件。超链接和图像都有单独的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,showPage = true) {
var pageId = pages.length;
var newPage = new Page(pageId,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。我知道可以通过将特定linkId
对象的Page
更改为“ logo”而不是“ home”来解决此问题,但这有点使代码混乱。我想看看是否还有其他选择。
PSS。我也知道JS具有实际的Class
es,而不是我使用的基于函数的“类”。这和我的问题无关。