使父 div 不可點擊，但兒童可點擊 - CSS

Question

在這樣的場景中，我希望能夠通過頂部 div 單擊背景 div（紅色），同時仍然能夠單擊頂部 div 的子級（藍色和綠色）。

 function bgclick() { console.log('Background Is Clicked!'); } function topclick() { console.log('Top Is Clicked!'); }

 #background { background-color: #f33; width: 250px; height: 250px; position: fixed; top: 0; left: 0; z-index: -1; } #top { width: 250px; height: 250px; position: fixed; top: 0; left: 0; } .children { width: 50px; height: 50px; position: relative; }

 <div id="background" onclick="bgclick()"></div> <div id="top"> <div class="children" onclick="topclick()" style="background-color:#3f3"></div> <div class="children" onclick="topclick()" style="background-color:#33f"></div> </div>

我玩過指針事件： none 。 這只會使一個可點擊而另一個不可點擊。 我怎樣才能做到這樣我就可以點擊紅色的並收到一條消息，以及藍色和綠色的消息？

Answer 1

您必須通過將#top容器嵌套到#background容器中來更改標記。

然后簡單地將事件傳遞給topclick方法並將event.stopPropagation()添加到它以確保只點擊最頂部的div 。

查看修改后的代碼：

 function bgclick() { console.log('Background Is Clicked!') } function topclick(event) { event.stopPropagation(); console.log('Top Is Clicked!') }

 #background { background-color: #f33; width: 250px; height: 250px; position: fixed; top: 0; left: 0; z-index: -1; } #top { width: 250px; height: 250px; position: fixed; top: 0; left: 0; } .children { width: 50px; height: 50px; position: relative; }

 <div id="background" onclick="bgclick()"> <div id="top"> <div class="children" onclick="topclick(event)" style="background-color:#3f3"> </div> <div class="children" onclick="topclick(event)" style="background-color:#33f"> </div> </div> </div>

Answer 2

要使父 div 不可點擊但子 div 可點擊，僅使用指針事件。

指針事件

元素永遠不是指針事件的目標； 但是，如果這些后代將指針事件設置為其他值，則指針事件可能會針對其后代元素。 在這些情況下，指針事件將在事件捕獲/冒泡階段期間，在它們往返后代的途中適當地觸發此父元素上的事件偵聽器。

更多關於它是如何在這里工作的指針事件

.parent { 
    pointer-events: none;
}

.child {
    pointer-events: auto;
}

Answer 3

我找到了一種簡單的方法來解決這個問題（op）。

指針事件：無； 使鼠標不會與元素交互。 默認情況下，指針事件是繼承的，因此只需將子項設置為指針事件：自動； .

 function bgclick() { console.log('Background Is Clicked!'); } function topclick() { console.log('Top Is Clicked!'); }

 #background { background-color: #f33; width: 250px; height: 250px; position: fixed; top: 0; left: 0; z-index: -1; } #top { width: 250px; height: 250px; position: fixed; top: 0; left: 0; pointer-events: none; } .children { width: 50px; height: 50px; position: relative; pointer-events: auto; }

 <div id="background" onclick="bgclick()"></div> <div id="top"> <div class="children" onclick="topclick()" style="background-color:#3f3"></div> <div class="children" onclick="topclick()" style="background-color:#33f"></div> </div>