如何在js中阻止鼠标右键单击菜单并在鼠标右键单击时显示工具提示

Question

我需要在我的网站上用鼠标右键单击我的图像时隐藏上下文菜单，并且需要在用户右键单击图像时显示工具提示

我找到了阻止右键单击操作的解决方案。下面给出了

<body oncontextmenu="return false;">

现在我需要在用户右键单击图像时显示工具提示。

提前致谢;)

Answer 1

好吧，您需要在图像上定义事件侦听器以更改行为。我建议您需要调用 `event.stopPropagation 来阻止您在 body 上定义的侦听器工作。它应该工作，因为 JS 中的事件正在冒泡，所以它们首先触发最内部的元素，然后触发外部元素。

可以这样看

image.addEventListener("contextmenu", (event) => {
    event.stopPropagation();
    // some other code that you want to implement.
});

这里的image只是一个HTML元素，你可以通过querySelector得到。更高级的解决方案会有以下方式。

body.addEventListener("contextmenu", (event) => {
    if (event.target.tagName.toLowerCase() !== 'img') {
       return false;
    }
});

然后您将需要删除 HTML 中定义的 oncontextmenu 侦听器。上面的代码将禁用任何不在 img 标签上发生的点击的上下文。

How to Block Mouse right click menu and show tooltip on mouse right click in js