在小书签中，如何防止发生 Shift-右键单击时出现上下文菜单？

Question

我希望当用户按住 Shift 键并右键单击图像时，书签能够识别图像源，但我在使用明显的事件侦听器时遇到了麻烦。

我没有成功使用上下文菜单事件的事件侦听器并检查是否按下了 Shift 键。

我已经成功地为 mousedown 添加了事件侦听器并检查是否按下了 Shift 键，但弹出了上下文菜单，我不知道如何防止这种情况。我只希望当按住鼠标按下 Shift 时阻止它。

实际上我想要这个用于 contextmenu 事件，但会接受使用 mousedown 事件。

这是代码（在粘贴到 MrColes 书签生成器之前）：

handler = function(event) {
    console.log("The doc was mousedowned!");
    if (event.shiftKey) {
        console.log("shift was pressed!");
        console.log("event.srcElement.src: " + event.srcElement.src);
        if (event.srcElement.src === undefined) {
            alert("failed to find image at click position");
        } else {
            myImageSrc = event.srcElement.src;
        }
    }
};
document.addEventListener("mousedown", handler);

Answer 1

使用

contextmenu

进行上下文菜单预防，并使用

keydown

设置 已按下

shift

的变量。因此，我们还必须使用

keyup

来清除变量。

var obj_down = {}


addEventListener("keydown", function(ev) {
  obj_down[ev.key] = true;
})

addEventListener("keyup", function(ev) {
  delete obj_down[ev.key];
})

addEventListener("contextmenu", function(ev) {
  if (obj_down['Shift']) {
    ev.preventDefault()
  }
})

Context menu is disabled when Shift is down.