javascript - 制作 :before not clickable in Firefox

Question

我正在开发一个图片 uploader 。我有一个使用 https://codecanyon.net/item/slim-image-upload-and-ratio-cropping-plugin/16364167?ref=pqina&ref=pqina&clickthrough_id=749572872&redirect_back=true 的图像拖放字段.但我希望 dropzone 有一个图像作为 dropzone 的叠加层。我设法用 :before 元素做到了这一点。它在 Chrome 甚至 Edge 中都按预期工作。但是在 Firefox 中，我无法单击 :before 元素后面的拖放区。有什么办法可以解决这个问题吗？

此处非常简化的示例:

简化 :before:

.dropper:before {
  content: " ";
  width: 200px;
  height: 300px;
  background: #ff0000;
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: .5;
  -moz-opacity: 0.5;
}

https://jsfiddle.net/6kv6u9kv/

我希望“点击我”可以点击。我感谢任何快速帮助，因为这是为了工作。提前致谢!

Answer 1

解决方案:

您可以在叠加层中使用 pointer-events: none; css 属性。

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

---

代码片段:

.dropper {
  width: 200px;
  height: 200px;
  background: #aaa;
  padding-top: 100px;
}
.dropper:before {
  content: " ";
  width: 200px;
  height: 300px;
  background: #ff0000;
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: .5;
  -moz-opacity: 0.5;
  z-index: 100000;
  pointer-events: none;
}

<div class="dropper">
  <a href="#" id="click">
  click me
  </a>
</div>