时间戳

首页 > 解决方案 > Firefox 在禁用输入时将上下文菜单事件直接传播到 DOM 根目录

javascript - Firefox 在禁用输入时将上下文菜单事件直接传播到 DOM 根目录

问题描述

我正在尝试禁用上下文菜单。要做到这一点，我stopPropagation和preventDefault上body。这工作正常，除了inputFirefox 中的禁用元素。

启用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 元素可以附加我的阻塞侦听器以捕获所有失败事件？

标签： javascriptfirefoxdom-events

解决方案

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

input:disabled{ pointer-events: none; }

推荐阅读