目录1.背景2.解决思路2.1使用pointer-events2.2使用preventDefault和stopPropagation2.3使用dispatchEvent发送响应事件3
在日常的工作中，有这样一个情景，两个兄弟元素完全重叠在一起，当触发一个事件的时候，只触发了上面的那一层，下面的没有触发，或者上面的一层负责点击事件，下面的一层负责滚动或者滑动事件。点击事件的响应者会将下面那一层的事件给遮挡。
pointer-events是CSS中设置事件响应情况的样式当值为none的时候对所有事件都是不响应的，但是由于上面那一层也需要响应事件所以此方式失败。
preventDefault和stopPropagation是对事件冒泡和捕捉的阻止，但是由于冒泡和捕捉是父子元素之间的情况，所以无法处理兄弟元素之间的情况。所以又失败。
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)
这段代码未做兼容测试，谨慎使用
以上就是dispatchEvent解决重叠元素响应事件示例详解的详细内容，更多关于dispatchEvent重叠元素响应的资料请关注编程网其它相关文章！
--结束END--
本文标题: dispatchEvent解决重叠元素响应事件示例详解
本文链接: https://lsjlt.com/news/168867.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0