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重叠元素响应的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Require.JS中的几种define定义方式示例
这篇文章主要给大家介绍了关于Require.JS中几种define定义方式的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
js innerHTML 的一些问题的解决方法
innerHTML 属性的使用非常流行，因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很显然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。
2008-06-06
说明你的Javascript技术很烂的五个原因
Javascript在互联网上名声很臭，但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。
2011-04-04
基于Html+CSS+JS实现手动放烟花效果
这篇文章主要介绍了利用Html+CSS+JavaScript实现的放烟花效果，文中一共实现了两种方式：手动和自动，文中的示例代码讲解详细，感兴趣的可以试一试
2022-01-01
微信小程序点击生成朋友圈分享图(遇到的坑)
这篇文章主要介绍了微信小程序点击生成朋友圈分享图,本文给大家分享小编在实现此功能时遇到的各种坑，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
快速实现JS图片懒加载(可视区域加载)示例代码
目前很多网站，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，下面本文就介绍了JS图片懒加载(可视区域加载)的实现方法，一起来看看吧。
2017-01-01
javascript import css实例代码
差点被FF下的insertRule给带晕了. sheet.insertRule("@import url('aa.css');",sheet.cssRules.length);
2008-07-07
javascript模拟post提交隐藏地址栏的参数
想要隐藏地址栏的参数，就只能用javascript模拟post提交，下面是示例代码，需要的朋友可以看看
2014-09-09
关于JS中setTimeout()无法调用带参函数问题的解决方法
这篇文章主要介绍了关于JS中setTimeout()无法调用带参函数问题的解决方法,提供了2种解决方法供大家对比参考,需要的朋友可以参考下
2016-06-06
Javascript array类数组操作方法
Javascript array类的一些对象使用方法，方便大家操作数组
2009-08-08