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

dispatchEvent解決重疊元素響應事件示例詳解

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

1.背景

在日常的工作中，有這樣一個情景，兩個兄弟元素完全重疊在一起，當觸發(fā)一個事件的時候，只觸發(fā)了上面的那一層，下面的沒有觸發(fā)，或者上面的一層負責點擊事件，下面的一層負責滾動或者滑動事件。點擊事件的響應者會將下面那一層的事件給遮擋。

2.解決思路

2.1使用pointer-events

pointer-events是css中設置事件響應情況的樣式當值為none的時候對所有事件都是不響應的，但是由于上面那一層也需要響應事件所以此方式失敗。

2.2使用preventDefault和stopPropagation

preventDefault和stopPropagation是對事件冒泡和捕捉的阻止，但是由于冒泡和捕捉是父子元素之間的情況，所以無法處理兄弟元素之間的情況。所以又失敗。

2.3使用dispatchEvent發(fā)送響應事件

dispatchEvent可以向其他元素發(fā)送模擬的事件 element.dispatchEvent(event)

比如創(chuàng)建鼠標事件,然后再分發(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)

此種方式已經被廢棄但是瀏覽器仍支持，同時個人感覺瀏覽器兼容性不足，一些瀏覽器專屬的字段不會設置，無法改變 還有一種使用Event類進行創(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)建

綜合后結果就是(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重疊元素響應的資料請關注腳本之家其它相關文章！

相關文章

最新評論