[英]event.target of a jQuery click event returning the child of the clicked element
我在包含图像的超链接上有一个 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 而不是我使用的基于函数的“类”。 这与我的问题无关。
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>
您使用event.currentTarget
指向您附加侦听器的元素。 它不会随着事件冒泡而改变。
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
希望这是有帮助的。
有一个 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.