【CSS】解决上层盒子遮挡下层图片点击事件的三种方法

1. Pointer Events 属性

CSS 的 pointer-events 属性是一个强大的工具，可以控制元素是否接收用户的交互事件。通过将上层盒子的 pointer-events 设置为 none，我们可以确保它不会阻止下层图片的点击事件。

.upper-box {
    z-index: 999; /* 设置更高的 z-index */
    pointer-events: none; /* 让上层盒子不接收鼠标事件 */
}
1
2
3
4

2. 透明背景

如果上层盒子不需要用户与之交互，我们可以将其背景设置为透明。这样，尽管上层盒子视觉上覆盖了下层图片，但下层图片仍然可以正常响应点击事件。

.upper-box {
    z-index: 999; /* 设置更高的 z-index */
    background-color: transparent; /* 将背景设置为透明 */
}
1
2
3
4

3. JavaScript 事件处理

在JavaScript中，我们可以通过监听上层盒子的点击事件，并在事件处理程序中执行一些操作，如取消事件冒泡，确保下层图片的点击事件不受到上层盒子的干扰。

<div id="upperBox" style="z-index: 999;">div>
<img src="your-image.jpg" id="image" />

<script>
    var upperBox = document.getElementById('upperBox');
    var image = document.getElementById('image');

    upperBox.addEventListener('click', function (event) {
        // 阻止事件冒泡
        event.stopPropagation();
        // 在这里执行上层盒子的点击事件处理逻辑
    });

    image.addEventListener('click', function () {
        // 在这里执行图片的点击事件处理逻辑
    });
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17