欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

dispatchEvent解決重疊元素響應(yīng)事件示例詳解

 更新時(shí)間：2022年10月07日 09:50:38   作者：一帆風(fēng)順two  
這篇文章主要為大家介紹了dispatchEvent解決重疊元素響應(yīng)事件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.背景

在日常的工作中，有這樣一個(gè)情景，兩個(gè)兄弟元素完全重疊在一起，當(dāng)觸發(fā)一個(gè)事件的時(shí)候，只觸發(fā)了上面的那一層，下面的沒(méi)有觸發(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是對(duì)事件冒泡和捕捉的阻止，但是由于冒泡和捕捉是父子元素之間的情況，所以無(wú)法處理兄弟元素之間的情況。所以又失敗。

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è)人感覺(jué)瀏覽器兼容性不足，一些瀏覽器專(zhuān)屬的字段不會(huì)設(shè)置，無(wú)法改變 還有一種使用Event類(lèi)進(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類(lèi)創(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)

這段代碼未做兼容測(cè)試，謹(jǐn)慎使用

3.可以使用場(chǎng)景

  • 多個(gè)元素重疊但需要響應(yīng)不同的事件
  • 多個(gè)元素重疊但需要全部有響應(yīng)
  • 事件委托
  • 特定事件的穿透前一個(gè)元素（可以指定事件的pointer-events）

以上就是dispatchEvent解決重疊元素響應(yīng)事件示例詳解的詳細(xì)內(nèi)容，更多關(guān)于dispatchEvent重疊元素響應(yīng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論