Question

在像这样的场景中，我希望能够通过顶部div点击背景div（红色），同时仍然可以点击顶部div的孩子（蓝色和绿色）。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

我玩过指针事件：无。这只会使一个可点击而另一个不可点击。我该怎么做才能点击红色的那个，然后收到一条消息，还有蓝色和绿色的消息？

Answer 1

您必须通过将#top容器嵌套到#background容器中来更改标记。

然后只需将事件传递给topclick方法并向其添加event.stopPropagation()即可确保点击最顶层的div。

参见修改后的代码：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

要使父 div 不可点击而子 div 可点击，则只能使用指针事件。

指针事件

<块引用>

元素永远不是指针事件的目标；然而，指针如果这些后代具有，则事件可以针对其后代元素指针事件设置为其他值。在这些情况下，指针事件将触发此父元素上的事件侦听器适合在活动期间前往/离开后代的途中捕获/气泡阶段。

在此处详细了解它的工作原理pointer-events

.parent { 
    pointer-events: none;
}

.child {
    pointer-events: auto;
}

Answer 3

我找到了解决此问题的简单方法（op）。

pointer-events：none; 使鼠标不会与元素交互。默认情况下，继承指针事件，因此只需将子项设置为 pointer-events：auto; 。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

使父div无法点击，但儿童可点击 - CSS

3 个答案:

指针事件