Question

我正在制作图片上传器。我使用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中，我无法单击：在Element之前的dropzone。有没有办法解决这个问题？

这里的简化示例：

简化：之前：

.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

<强> SOLUTION：

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

pointer-events属性允许控制HTML元素的方式响应鼠标/触摸事件 - 包括CSS悬停/活动状态，点击/点击Javascript中的事件，以及光标是否为可见。

CODE SNIPPET

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

Answer 2

您可以使用css pointer-events样式告诉浏览器，顾名思义，忽略任何指针事件。这包括将指针事件阻塞到它可能涵盖的元素。

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

当然请检查浏览器支持。如果您的目标是不支持它的浏览器，则必须实现一些转发系统：捕获.dropper上的点击获取鼠标x，y并且对于占据相同坐标的任何元素，触发该元素的事件。

Answer 3

pointer-events: none是一个显而易见的选择，但浏览器支持较少。

这是另一种方式

.dropper {
  width: 200px;
  height: 200px;
  background: #aaa;
  padding-top: 100px;
  position: relative;
}
.dropper:before {
  content: " ";
  width: 200px;
  height: 300px;
  background: #ff0000;
  position: absolute;
  top: 0;
  left: 0;
  opacity: .5;
  -moz-opacity: 0.5;
}
.dropper a {
  position: relative;
}

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

make：在Firefox中无法点击之前

3 个答案: