如何仅对一个底层元素应用指针事件-解网

问：

我有以下代码：

          <div className="my-div" />
              <button className="my-btn1">this button should be clickable</button>
              <button className="my-btn2">this button should not be clickable</button>
          </div>

的 is 和按钮的是。如果我设置为，这两个按钮都是可点击的，但我希望是可点击的，而不是可点击的。position.my-divrelativeabsolutepointer-events:none.my-div.my-btn1.my-btn2

css 指针事件

评论

0赞 Tim R 8/23/2023

禁用的 HTML 属性还不够吗？如果不是，为什么不设置为而不是？pointer-events: nonemy-btn2my-div

0赞 Subhan Shamsoddini 8/23/2023

不，它们不应该被禁用。还有更多元素。

0赞 Tim R 8/23/2023

如果按钮彼此重叠，您如何期望单击不可见的底部按钮？

0赞 Subhan Shamsoddini 8/23/2023

按钮位于不同的位置，它们都是可见的。

0赞 Tim R 8/23/2023

同样，为什么不设置 my-btn2 而不是 my-div？pointer-events: none

答：

1赞 Tim R 8/23/2023 #1

声明 on 似乎允许它可单击pointer-events: automy-btn1

.my-div {
  position: relative;
  pointer-events: none;
}

button {
  position: absolute;
  cursor: pointer;
}

.my-btn1 {
  pointer-events: auto;
}

.my-btn2 {
  right: 0;
}

<div class="my-div">
  <button class="my-btn1">this button should be clickable</button>
  <button class="my-btn2">this button should not be clickable</button>
</div>

上一个：获取浏览器/反应以区分在元素容器上水平滚动与拖动该容器中的单个元素

下一个：如何禁用锚点指针事件，同时为锚点子级保留它们？