dispatchEvent解決重疊元素響應(yīng)事件示例詳解
1.背景
在日常的工作中，有這樣一個(gè)情景，兩個(gè)兄弟元素完全重疊在一起，當(dāng)觸發(fā)一個(gè)事件的時(shí)候，只觸發(fā)了上面的那一層，下面的沒有觸發(fā)，或者上面的一層負(fù)責(zé)點(diǎn)擊事件，下面的一層負(fù)責(zé)滾動(dòng)或者滑動(dòng)事件。點(diǎn)擊事件的響應(yīng)者會(huì)將下面那一層的事件給遮擋。
2.解決思路
2.1使用pointer-events
pointer-events是css中設(shè)置事件響應(yīng)情況的樣式當(dāng)值為none的時(shí)候?qū)λ惺录际遣豁憫?yīng)的，但是由于上面那一層也需要響應(yīng)事件所以此方式失敗。
2.2使用preventDefault和stopPropagation
preventDefault和stopPropagation是對事件冒泡和捕捉的阻止，但是由于冒泡和捕捉是父子元素之間的情況，所以無法處理兄弟元素之間的情況。所以又失敗。
2.3使用dispatchEvent發(fā)送響應(yīng)事件
dispatchEvent可以向其他元素發(fā)送模擬的事件 element.dispatchEvent(event)
比如創(chuàng)建鼠標(biāo)事件,然后再分發(fā)(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)
此種方式已經(jīng)被廢棄但是瀏覽器仍支持，同時(shí)個(gè)人感覺瀏覽器兼容性不足，一些瀏覽器專屬的字段不會(huì)設(shè)置，無法改變 還有一種使用Event類進(jìn)行創(chuàng)建(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類創(chuàng)建
綜合后結(jié)果就是(e為傳入事件)
let init={}
for(let i in e){
init[i]=e[i]
}
let event=new e.constructor(e.type,init)
target.dispatchEvent(event)
這段代碼未做兼容測試，謹(jǐn)慎使用
3.可以使用場景
- 多個(gè)元素重疊但需要響應(yīng)不同的事件
- 多個(gè)元素重疊但需要全部有響應(yīng)
- 事件委托
- 特定事件的穿透前一個(gè)元素（可以指定事件的pointer-events）
以上就是dispatchEvent解決重疊元素響應(yīng)事件示例詳解的詳細(xì)內(nèi)容，更多關(guān)于dispatchEvent重疊元素響應(yīng)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Require.JS中幾種define定義方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
innerHTML 屬性的使用非常流行，因?yàn)樗峁┝撕唵蔚姆椒ㄍ耆娲粋€(gè) HTML 元素的內(nèi)容。另外一個(gè)方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很顯然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。2008-06-06
說明你的Javascript技術(shù)很爛的五個(gè)原因
Javascript在互聯(lián)網(wǎng)上名聲很臭，但你又很難再找到一個(gè)像它這樣如此動(dòng)態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言。2011-04-04
基于Html+CSS+JS實(shí)現(xiàn)手動(dòng)放煙花效果
這篇文章主要介紹了利用Html+CSS+JavaScript實(shí)現(xiàn)的放煙花效果，文中一共實(shí)現(xiàn)了兩種方式：手動(dòng)和自動(dòng)，文中的示例代碼講解詳細(xì)，感興趣的可以試一試2022-01-01
這篇文章主要介紹了微信小程序 點(diǎn)擊生成朋友圈分享圖,本文給大家分享小編在實(shí)現(xiàn)此功能時(shí)遇到的各種坑，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
快速實(shí)現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
目前很多網(wǎng)站，在圖片加載時(shí)均采用了一種名為懶加載的方式，具體表現(xiàn)為，當(dāng)頁面被請求時(shí)，只加載可視區(qū)域的圖片，其它部分的圖片則不加載，只有這些圖片出現(xiàn)在可視區(qū)域時(shí)才會(huì)動(dòng)態(tài)加載這些圖片，下面本文就介紹了JS圖片懶加載(可視區(qū)域加載)的實(shí)現(xiàn)方法，一起來看看吧。2017-01-01
javascript import css實(shí)例代碼
差點(diǎn)被FF下的insertRule給帶暈了. sheet.insertRule("@import url('aa.css');",sheet.cssRules.length);2008-07-07
javascript模擬post提交隱藏地址欄的參數(shù)
想要隱藏地址欄的參數(shù)，就只能用javascript模擬post提交，下面是示例代碼，需要的朋友可以看看2014-09-09
關(guān)于JS中setTimeout()無法調(diào)用帶參函數(shù)問題的解決方法
這篇文章主要介紹了關(guān)于JS中setTimeout()無法調(diào)用帶參函數(shù)問題的解決方法,提供了2種解決方法供大家對比參考,需要的朋友可以參考下2016-06-06
Javascript array類的一些對象使用方法，方便大家操作數(shù)組2009-08-08