在我的網站上，我有一些div帶有一些內容的元素。每個元素都應該是可點擊的。我可以為每個事件添加一個單獨的事件偵聽器，但我寧愿將一個事件偵聽器附加到容器。為了更好地解釋檔案結構，我在下面添加了一個示例。
<div id="container">
<div>
<h1>Element 1</h1>
<p>Lorem ipsum...</p>
</div>
<div>
<h1>Element 2</h1>
<p>...dolor sit amet...</p>
</div>
</div>
現在我的問題如下：我知道 usingevent.target可以讓我獲得已單擊的實際元素，當使用一個附加到div帶有 ID的事件偵聽器時，它container可能是容器、直接子元素之一或其中的文本元素。如何確定div用戶單擊了哪些內部元素（如果有），即使目標不是其div本身？
如果有使用 JQuery 的不同/更簡單的解決方案，我也會對此感興趣。
uj5u.com熱心網友回復：
如果您不需要每個 div（p 和 h1）的內容具有互動元素（例如表單項），那么您可以添加一個不可點擊的額外 div 包裝器:)。現在您的所有點擊目標都將是第一個子 div。
document.querySelector("#container").addEventListener("click", (e) => console.log(e.target)).unclickable {
pointer-events:none;
}<div id="container">
<div>
<div class="unclickable">
<h1>Element 1</h1>
<p>Lorem ipsum...</p>
</div>
</div>
<div>
<div class="unclickable">
<h1>Element 2</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
鑒于您在問題下的評論，您的目標是找到一種有效的方法來確定用戶是否單擊了外部div元素或其中一個子元素。
為此，您將事件的target屬性（即引發事件的元素）與currentTarget屬性（始終是事件系結到的元素）進行比較。邏輯看起來像這樣：
$('#container').on('click', e => {
if (e.target == e.currentTarget) {
console.log('clicked on parent');
} else {
console.log(`clicked on child element - ${e.target.tagName}`);
}
});#container {
border: 1px solid #000;
padding: 10px;
}
#container > div {
display: inline-block;
border: 1px solid #CCC;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div>
<h1>Element 1</h1>
<p>Lorem ipsum...</p>
</div>
<div>
<h1>Element 2</h1>
<p>...dolor sit amet...</p>
</div>
</div>請注意，上面示例中的 CSS 只是為了使每個元素的邊界更加可見。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/410920.html
標籤：
上一篇：如何將匯入與現有的Node應用程式一起使用？[復制]
下一篇：在SQL中遇到條件計數問題