Question

我想为我的按钮处理鼠标右键单击事件。我写了以下代码；

mybutton.onmousedown = e => {
    e.preventDefault();
    const mouseEvent = { 
        0: () => leftClickCallback,
        2: () => rightClickCallback
    }
    mouseEvent[ e.button ]();
}

它可以正常工作，但它不会阻止浏览器上下文菜单事件，因此我必须设置如下所示的“ oncontextmenu”事件以防止浏览器上下文菜单事件；

mybutton.oncontextmenu = e => e.preventDefault();

我也试图阻止鼠标事件的传播，如下所示，尽管它不起作用：

mybutton.onmousedown = e => {
        e.preventDefault();
        e.stopPropagation(); // <====
        const mouseEvent = { 
            0: () => leftClickCallback,
            2: () => rightClickCallback
        }
        mouseEvent[ e.button ]();
}

我不知道为什么我需要为按钮显式禁用oncontextmenu事件。

Answer 1

单击鼠标右键似乎会触发多个事件（尽管可能取决于浏览器）：

具有event.button === 2和/或event.which === 3的MouseDown事件，
一个ContextMenu事件。

这很有意义，因为上下文菜单也可以通过键盘按钮（取决于键盘布局）或宏来打开。

您可以做的是使用相同的回调。例如：

function preventAll(event) {
    event.preventDefault();
    event.stopPropagation();
}

document.getElementById('something').addEventListener('mousedown', preventAll);
document.getElementById('something').addEventListener('contextmenu', preventAll);

<button id="something">test</button>

如何正确处理按钮的右键单击鼠标事件

1 个答案: