Firefox 在禁用输入时将上下文菜单事件直接传播到 DOM root 之后

Question

我正在尝试禁用上下文菜单。为此，我 stopPropagation 和 preventDefault body。这工作正常，除了在 Firefox 中禁用 input 元素。

启用 input 元素可以正确地将事件冒泡到主体，但禁用的元素允许出现右键单击菜单。我确定事件被直接发送到 DOM 更高的地方，但我已经尝试将侦听器附加到 document 和 window 但没有成功。

document.body.addEventListener("contextmenu", e => {
    e.preventDefault();
    e.stopPropagation();
    console.log("context menu blocked at body");
});

Array.from(document.querySelectorAll("input"))
    .forEach(input => {
        input.addEventListener("contextmenu", e => {
            e.preventDefault();
            e.stopPropagation();
            console.log("context menu blocked at input");
        });
    });

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

<input type="text" value="I am disabled" disabled />
<input type="text" value="I am not disabled" />

我还尝试将阻塞事件侦听器添加到页面上的输入。启用的按预期工作；残疾人的行为没有变化。

此行为在 Chromium/Webkit 浏览器（Chrome、Safari、Brave）中似乎不存在。

有什么方法可以在禁用的输入元素上阻止 Firefox 中的上下文菜单？ 是否有更高级别的 DOM 元素我可以附加我的阻止侦听器以捕获所有坠落事件？

Answer 1

虽然您无法在 Firefox 中禁用已禁用输入的上下文菜单，但您可以使用 CSS 完全阻止鼠标交互来完成 99% 相同的操作：

input:disabled{ pointer-events: none; }

Firefox 在禁用输入时将上下文菜单事件直接传播到 DOM root 之后

Firefox propagates context menu event directly past DOM root on disabled input

javascript

firefox

dom-events