抓住左键，让右键通过

Question

我有一个我希望能够右键单击的元素。但是，在该元素上方是几个透明的元素，我希望能够左键单击（以了解单击的位置）。有没有办法让右键点击下面的元素，而左键仍然被上面的透明元素注册？

Answer 1

解决此问题的一种方法是防止右键单击对顶部的透明元素产生任何影响，除非使其在下方元素上调度事件。

这是一个简单的例子。

.container {
  width: 300px;
  height: 300px;
  position: relative;
}
.underneath {
  width: 100%;
  height: 100%;
  background-color: pink;
}
.ontop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="container">
<div class="underneath" oncontextmenu="alert('underneath');">right click me</div>
<div class="ontop" onclick="alert('ontop');" oncontextmenu="event.preventDefault();const ev = new Event('contextmenu'); document.querySelector('.underneath').dispatchEvent(ev);"></div>
</div>