如何使整個 div 可點擊？

Question

我有一個包含內容的div ：

<div class="block">
    <img src='...'>
    <span>...</span>
</div>

當有人點擊div時，我設置了一個 JavaScript 事件監聽器：

document.body.addEventListener("click", function(e) {
    if (e.target.tagName === 'DIV' && e.target.classList.contains("block")){
        (code)
    }
}

當我單擊沒有內容的div區域時，它可以工作。 但是，當我單擊圖像或文本時，它不起作用。
我怎樣才能在整個 div 工作時得到這個？

Answer 1

event.target是您單擊的元素。 如果您不直接單擊 div，那么您的代碼將與您的測試不匹配，因為您正在單擊子元素。

因此，當您使用事件委托並想知道是否單擊了某個元素或其子元素之一時，您需要向上走一棵樹以查看它是否是該元素。 你可以用closest的來做到這一點

 document.body.addEventListener("click", function(e) { if (e.target.closest('div.block')) { console.log('clicked', Date.now()); } });

 <h2>Example</h2> <div class="block"> <img src='http://placekitten.com/g/200/300'> <span>foo bar kitten</span> </div>

Answer 2

歡迎來到SO。 您可以在 div 本身上添加事件偵聽器，然后執行您喜歡的任何代碼。 它在您的情況下不起作用的原因是因為您將事件偵聽器添加到整個主體，因此當事件處理程序被調用時，即使它們在div內，它也無法識別您正在單擊的元素。

試試這個：

document.querySelector('div#block').addEventListener("click", function(e) {
  // code...
});

Answer 3

嘗試為 div 提供一個 id 並將您的事件偵聽器添加到其中。

<div id="myDiv" class="content">
    // your content goes here
</div>

並在 javascript

const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", (event) => {
   // your function goes here
})

Answer 4

有很多方法可以做到這一點。 但在我看來，最好的方法是讓 JS 中的任何東西都可以clickable是使用onClick() function。 您可以簡單地使用onClick=functionName()

 function changeBackground(){ let block = document.getElementsByClassName('block'); block[0].style.backgroundColor = "green"; }

 .block{ height: 50px; border: 1px solid; }

 <div class="block" onClick="changeBackground()"> <div>