dispatch note（dispatchEvent解决重叠元素响应事件示例详解）

时间2025-05-05 12:24:00分类IT科技浏览3662

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

1.背景

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

2.解决思路

2.1使用pointer-events

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

2.2使用preventDefault和stopPropagation

preventDefault和stopPropagation是对事件冒泡和捕捉的阻止，但是由于冒泡和捕捉是父子元素之间的情况，所以无法处理兄弟元素之间的情况。所以又失败。

2.3使用dispatchEvent发送响应事件

dispatchEvent可以向其他元素发送模拟的事件 element.dispatchEvent(event)

比如创建鼠标事件,然后再分发(e为传入事件)

let event=document.createEvent("MouseEvent") event.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.wheelDelta||e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlkey, e.altkey, e.shiftkey, e.metakey, e.button, null); target.dispatchEvent(event)

此种方式已经被废弃但是浏览器仍支持，同时个人感觉浏览器兼容性不足，一些浏览器专属的字段不会设置，无法改变还有一种使用Event类进行创建(e为传入事件)

let event=new MouseEvent(e.type,{ bubbles:e.bubbles, cancelable:e.cancelable, view:e.view, detail:e.detail, screenX:e.screenX, screenY:e.screenY, clientX:e.clientX, clientY:e.clientY, ctrlkey:e.ctrlkey, altkey:e.altkey, shiftkey:e.shiftkey, metakey:e.metakey, button:e.button, }) target.dispatchEvent(event)

每一种Event要使用不同的Event类创建

综合后结果就是(e为传入事件)

let init={} for(let i in e){ init[i]=e[i] } let event=new e.constructor(e.type,init) target.dispatchEvent(event)

这段代码未做兼容测试，谨慎使用

3.可以使用场景

多个元素重叠但需要响应不同的事件多个元素重叠但需要全部有响应事件委托特定事件的穿透前一个元素（可以指定事件的pointer-events）

以上就是dispatchEvent解决重叠元素响应事件示例详解的详细内容，更多关于dispatchEvent重叠元素响应的资料请关注本站其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。