Question

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

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

<body oncontextmenu="return false;">

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

提前致谢;)

Answer 1

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

它可以如下所示。

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

此处的 image 只是您可以通过 querySelector 获取的 HTML 元素。更高级的解决方案将有以下方式。

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

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