Click through div to underlying elements

技术背景

在网页开发中，有时会遇到一个 div 元素覆盖在其他元素之上，导致下方元素无法响应点击事件的情况。为了解决这个问题，需要实现点击穿透效果，即让点击事件穿过覆盖层作用到下方元素上。

实现步骤

使用 pointer-events 属性

1. 全局设置：对于需要忽略点击事件的层，设置 pointer-events: none。
2. 子元素特殊处理：如果该层的某些子元素需要响应点击事件，设置 pointer-events: auto。

手动事件转发（针对 IE 等不支持 pointer-events 的情况）

1. 隐藏覆盖层。
2. 获取鼠标点击位置。
3. 找到该位置下的元素。
4. 触发该元素的点击事件。
5. 显示覆盖层。

核心代码

使用 pointer-events 属性

.parent {
    pointer-events: none;        
}
.child {
    pointer-events: auto;
}

<div class="parent">
    <a href="#">I'm unresponsive</a>
    <a href="#" class="child">I'm clickable again, wohoo !</a>
</div>

手动事件转发

$('#elementontop').click(e => {
    $('#elementontop').hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $('#elementontop').show();
});

最佳实践

• 跨浏览器兼容性：对于现代浏览器，优先使用 pointer-events 属性；对于 IE 等不支持的浏览器，采用手动事件转发的方式。
• 子元素处理：如果覆盖层有需要响应事件的子元素，合理设置 pointer-events 属性。

常见问题

• IE 兼容性问题：IE10 及以下版本不支持 pointer-events 属性，需要使用 AlphaImageLoader 或手动事件转发。
• 事件冒泡问题：使用 event.stopPropagation() 可以阻止事件冒泡，避免父元素处理不必要的事件。