javascript - Firefox 在禁用输入时直接通过 DOM 根传播上下文菜单事件

Question

我正在尝试禁用上下文菜单。为此，我在 body 上 stopPropagation 和 preventDefault。除了在 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% 相同的操作来完全阻止鼠标交互:

输入:禁用{ 指针事件:无； }