为什么 React 的 onContextMenu 在 Chrome 中的禁用元素上工作？

Answer 1

我花了一段时间来研究这个。这似乎是 Chrome 中的一个错误，尽管

contextmenu

是

PointerEvent

的一种，但它会在禁用元素上触发 但只有 冒泡时.

这是一个没有 React 的 JSFiddle：https://jsfiddle.net/bpe0yoc6/4/

// Only in chrome does this fire
document.querySelector("#root").addEventListener("contextmenu", (e) => { console.log("contextmenu fired", e.target.tagName) })

document.querySelector("#root").addEventListener("click", (e) => { console.log("click fired", e.target.tagName) })

#root {
  width: 200px;
  height: 200px;
  display: block;
  background-color: #ccc;
}

<div id="root">
  <button
      type="button"
      disabled
  >
      Click me
  </button>
</div>

React 在 DOM 树的根部注册事件句柄，这就是这样做的原因：

document.querySelector("button").addEventListener("contextmenu", (e) => { ... })

不会触发禁用按钮，也不会

oncontextmenu

.

我在 Chromium 问题跟踪器上开了一个问题：https://bugs.chromium.org/p/chromium/issues/detail?id=1421370