dispatchEvent解决重叠元素响应事件示例详解
更新时间：2022年10月07日 09:50:38 作者：一帆风顺two
这篇文章主要为大家介绍了dispatchEvent解决重叠元素响应事件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
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重叠元素响应的资料请关注脚本之家其它相关文章！
相关文章
通过event对象的fromElement属性解决热区设置主实体的一个bug
后台的热区管理中，如果鼠标移到热区上，会显示一个提示框，提示框里“设为主实体”、“删除”和“合并”等超链接，点击这些超链接可以进行各种操作。2008-12-12
匿名函数，顾名思义就是没有名字，下面有个不错的示例，大家可以学习下2014-03-03
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
本文给大家带来的是一款非常不错的富文本编辑器WangEditor，他最大的特点是它在ie6,7,8上都可以做到失去焦点后仍然可以在原位置插入图片，而且代码量很少，下面我们就来分析下他是如何实现的呢2015-05-05
这篇文章主要为大家详细介绍了基于JavaScript实现屏幕滚动效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了JS模拟实现哈希表及应用,结合实例形式分析了javascript模拟实现哈希表的步骤、相关操作技巧与使用方法,需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了Bootstrap3多级下拉菜单的相关资料，需引用bootstrap.min.css和bootstrap.min.css.js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
大家都知道在JS中数据类型按照访问方式和存储方式的不同可分为基本类型和引用类型。这篇文章主要介绍了JS中的两种数据类型以及实现引用类型的深拷贝 ,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了js调用本地exe程序的两种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章主要介绍了JavaScript设计模式之抽象工厂模式介绍,抽象工厂模式就是对功能类单独创建工厂类,这样就不必修改之前的代码,又扩展了功能,需要的朋友可以参考下2014-12-12
最新评论