使父 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>