有没有办法在指针事件设置为无的元素上触发 JavaScript onclick 事件？答案

【问题标题】：Is there a way to trigger a JavaScript onclick event on an element that has pointer-events set to none?有没有办法在指针事件设置为无的元素上触发 JavaScript onclick 事件？
【发布时间】：2017-12-09 01:07:07
【问题描述】：

我有一个将指针事件设置为无的元素，因此子元素的悬停样式不会显示。

但是，当单击此元素时，我想用 JavaScript 做一些事情。在 JavaScript 中使用 onclick 事件似乎不起作用，因为 pointer-events 设置为 none。

有没有办法解决这个问题，这样我就可以让一个没有指针事件的元素仍然可以触发 JavaScript 事件？

[data-drawer="open"] {
  .site-drawer {
    transform: translateX(0);
    transition: all .2s ease;
  }

  .site-container {
    transform: translateX(-27.5rem);
    // Disabling pointer events disables styles hover styles on below elements
    // But also disables clicking on container to remove it.
    pointer-events: none;
    transition: all .2s ease;
    &:after {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,.75);
      content: "";
    }
  }
}

JavaScript：

  this.siteContainer.addEventListener('click', (e) => {
    console.log('site container clicked');
    if(document.body.hasAttribute('data-drawer')) {
      document.body.removeAttribute('data-drawer');
    }
  });

干杯

【问题讨论】：

你能告诉我你如何将指针事件设置为无吗？
抱歉不清楚，pointer-events 是一个 CSS 属性，用于控制元素何时可以成为鼠标事件的目标。
所以，pointer-events 正在做它应该做的事情，不允许此类事件发生。那么设置为none的目的是什么？
当我希望用户关注的元素出现（即模式或滑入式导航菜单）时，我使用它在页面上应用包装器。虽然其中一个组件在页面上，但我不希望用户能够在容器内单击，因此我已将指针事件设置为无，但我仍然希望用户能够单击关闭它的模态页面。问题是没有指针事件设置为无悬停样式仍然出现在页面元素上，我想禁用悬停效果。
我建议使用伪元素和 z-index 在您的内容之上添加一个不可点击的叠加层，而不是使用 js

标签： javascript css events pointer-events

【解决方案1】：

正如我在 cmets 中提到的，您可以通过使用 pseudo-elements 和 z-index 在内容顶部添加不可点击的叠加层来实现此目的

基本上你有四层。

网站内容（白色）
覆盖网站内容的叠加层，而模态已打开（灰色）
模态（红色）
覆盖模式内容的层。（透明）

结果：用户无法在模态框内单击，但可以在 #2 层的任意位置外单击

粗略示例：

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .5)
}

.close {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: none;
  z-index: 1;
  position: fixed;
  cursor: default;
}

.modal-content:after {
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
}

.modal:target>.close {
  display: block;
}

.modal>div {
  width: 300px;
  text-align: center;
  padding: 40px;
  z-index: 2;
  position: relative;
  background: red;
}

.wrap,
.modal {
  display: flex;
  align-items: center;
  justify-content: center
}

<div class="wrap">
  <a href="#M"><button>You can click me!</button></a>
  <div id="M" class="modal">
    <div class="modal-content">
      <a href="#"><button>But not me!</button></a>
    </div>
    <a href="#" class="close"></a>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用此解决方法。将pointer-events: none设置为具有悬停效果的元素，并为仍然需要点击触发的元素添加一个包装器div。

$(".cant-click-this").on("click", function(ev) {
  console.log("You cant trigger the element, and it has no hover effects.");
});
$(".click-me-instead").on("click", function(ev) {
  console.log("You can trigger click through the wrapper.");
});

.cant-click-this {
  pointer-events: none;
}

.cant-click-this:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="click-me-instead">
  <button class="cant-click-this"> Try to click me</button> <br>Hovering is futile.
</div>

【讨论】：