如何使用 JavaScript 忽略覆盖图像上的鼠标交互？

当我们在 web 应用中使用图像或图片时，有时候需要使它们对鼠标事件不起作用，例如：当我们需要把一张图片设置为背景时，但图片上有一些鼠标事件，这会影响用户与其它页面元素的交互。

在这种情况下，我们可以使用以下 JavaScript 方法来忽略覆盖图像上的鼠标事件。

透明图片

一种方法是使用透明图片作为覆盖层。透明图片可以透过鼠标事件，不会阻止这些事件传递给其他元素。

<img src="transparent.png" style="position:absolute; top:0px; left:0px; width:100%; height:100%; pointer-events:none;" />

在这里，我们将一个透明的图片作为覆盖层，使用 position:absolute 将其放置在图片上方，并使用 pointer-events:none 属性将其的鼠标事件设置为 none。

CSS pointer-events

CSS 也提供了 pointer-events 属性，可以控制元素是否可以响应鼠标事件，以下是一些常见的用法：

• none - 元素不可以响应鼠标事件，事件会被传递到下面的元素
• auto - 默认值，元素可以响应鼠标事件
• visible - 元素可以响应鼠标事件，并且可以接收「穿透点击」，即在当前元素上点击时，它下面的元素也会收到点击事件。

在这里，我们可以将覆盖图片的指针事件设置为 none，从而使它不响应鼠标事件。

.overlay {
  pointer-events: none;
}

JavaScript 事件监听

我们还可以使用 JavaScript 事件监听来忽略覆盖图像上的鼠标事件。可以监听事件，当鼠标事件触发时，阻止事件传播到覆盖层。

var overlay = document.getElementById('overlay');

overlay.addEventListener('mousedown', function(event) {
  event.stopPropagation();
}, true);

在这里，我们获取覆盖层的元素，并使用 addEventListener 方法添加了一个 mousedown 事件监听器。当事件被触发时，使用 event.stopPropagation() 方法阻止事件向下传播，从而使覆盖层不响应鼠标事件。

以上就是三种忽略覆盖图像上的鼠标事件的方法，可以根据实际情况选择使用哪种方法。