如何通过dispatchEvent实现重叠元素事件响应的详细解析？

本文共计672个文字，预计阅读时间需要3分钟。

目录

1.背景

2.解决思路

2.1 使用pointer-events 2.2 使用preventDefault和stopPropagation 2.3 使用dispatchEvent发送响应事件

3.可用场景

3.1 背景 在日常工作中，有时会遇到这种情况，两个兄弟元素完全重叠。

目录

• 1.背景
• 2.解决思路
• 2.1使用pointer-events
• 2.2使用preventDefault和stopPropagation
• 2.3使用dispatchEvent发送响应事件
• 3.可以使用场景

1.背景

在日常的工作中，有这样一个情景，两个兄弟元素完全重叠在一起，当触发一个事件的时候，只触发了上面的那一层，下面的没有触发，或者上面的一层负责点击事件，下面的一层负责滚动或者滑动事件。点击事件的响应者会将下面那一层的事件给遮挡。

2.解决思路

2.1使用pointer-events

pointer-events是css中设置事件响应情况的样式当值为none的时候对所有事件都是不响应的，但是由于上面那一层也需要响应事件所以此方式失败。