一、問題產(chǎn)生：

我使用Overlay創(chuàng)建標(biāo)繪操作的小方塊元素，如下代碼和如圖。

然后我監(jiān)聽小方塊的mousedown事件。用原始的事件監(jiān)聽：

element.addEventListener('mousedown',process_mousedown);

然后監(jiān)聽map的pointermove事件

this.map.on('pointermove',process_pointmove)

內(nèi)部邏輯不用管。pc端測試，process_mousedown和process_pointmove兩個函數(shù)都能觸發(fā)。邏輯可以正常寫。

ok。換移動端。當(dāng)然mousedown要添加額外的事件。

element.addEventListener('mousedown touchstart',process_mousedown);

測試，發(fā)現(xiàn)process_mousedown函數(shù)可以正常觸發(fā)。但是process_pointmove這個函數(shù)卻怎么也觸發(fā)不了。

二、問題分析

跟蹤Openlayers的源碼。找到ol.map內(nèi)分發(fā)事件的handleMapBrowserEvent，發(fā)現(xiàn)了這樣一段代碼。

handleMapBrowserEvent(mapBrowserEvent) {//--還有其他邏輯let target = mapBrowserEvent.originalEvent.target;while (target instanceof HTMLElement) {if (target.parentElement === this.overlayContainerStopEvent_) {return;}target = target.parentElement;}//--事件往上層分發(fā)}

我們都知道。當(dāng)OverLay 不設(shè)置stopEvent屬性時，默認(rèn)該屬性為true。即所有overlay都放在ol-overlaycontainer-stopevent這個div內(nèi)

圖上紅色的就是我的那兩個控制點(diǎn)的元素。
也就是這個代碼邏輯就是，當(dāng)我事件觸發(fā)到map層的時候，我判斷這個事件的源頭元素，如果這個源頭元素是我這個ol-overlaycontainer-stopeventdiv下面的，則屏蔽所有的事件。你不管在map層用on監(jiān)聽什么事件，只要這個事件觸發(fā)的源頭是這個div下面的。你都監(jiān)聽不到。

為什么pc端可以？因?yàn)閜c端的pointermove 源頭元素都不是我的那個控制點(diǎn)DIV。但是對于移動端，因?yàn)槲沂前醋∵@個控制點(diǎn)DIV進(jìn)行拖動，所以源頭元素就是我的這個控制點(diǎn)DIV，所以被屏蔽了。

我覺得這是Openlayer這塊邏輯有問題，想屏蔽，pc的確沒有屏蔽。不想屏蔽，移動端的卻屏蔽了。

三、問題解決。

通過設(shè)置overlay的屬性stopEvent為false，可以暫時解決這個問題。因?yàn)槲业目刂泣c(diǎn)被放到map內(nèi)部的ol-overlaycontainer容器中去了。pointermove事件的源頭也找不到我的控制點(diǎn)。所以沒有被屏蔽掉。

大家看到這里應(yīng)該可以了。但是我的問題還沒有解決。這樣干之后，我通過原生的dom監(jiān)聽的mousedown和touchstart事件居然不觸發(fā)了。先記錄到這里，我還得繼續(xù)解決…

四、最終解決

問題解決了。我不能通過設(shè)置stopEvent為false解決問題。因?yàn)橐坏┰O(shè)置了這個，我移動端pc端不管怎么監(jiān)聽都無法拿到我要點(diǎn)擊的那個控制div。因?yàn)閛l-overlaycontainer-stopevent永遠(yuǎn)蓋在ol-overlaycontainer之上。事件都是從ol-overlaycontainer-stopevent傳遞出去的。

于是我只能想辦法不通過map的那個有問題的函數(shù)handleMapBrowserEvent，并且能夠監(jiān)聽pointmove事件。注意 openlayer官檔沒有提到map內(nèi)部事件監(jiān)聽器MapBrowserEventHandler。其實(shí)這個是事件原始分發(fā)過來的地方。即我直接監(jiān)聽這個對象。查找源碼，發(fā)現(xiàn)在map對象中果真有該對象：

該對象內(nèi)部有個_listerer的map表記錄了所有的注冊的監(jiān)聽器：

發(fā)現(xiàn)其繼承自ol.Event.Target，ol.Event.Target繼承自ol.Disposable自然找到了操作該監(jiān)聽器的方法：

于是解決方案：

map.mapBrowserEventHandler_.addEventListener('pointermove', xxx);map.mapBrowserEventHandler_.removeEventListener('pointermove', xxx);

最終測試。完美解決。

五、另外說一個坑

注意，上面的removeEventListener的第二個參數(shù)（即綁定的函數(shù)）一定要存在，并且這個函數(shù)移除之后一定不能再次傳遞進(jìn)來。
不信大家看源碼~~~這不得不吐槽了。

當(dāng)listener傳遞空值的時候。openlayer會檢測是否在列表中存在。即使不存在，也是直接執(zhí)行splice(-1,1)啊。理所當(dāng)然的，系統(tǒng)監(jiān)聽的函數(shù)就會被移除，導(dǎo)致map對應(yīng)的監(jiān)聽器被干掉。。。。。。慎用啊。

2022.6.3日（長期有效）：打個廣告，蘇州華為終端BG面向社會招聘人才，Java /C C++ / Python / Javascript 。有興趣來蘇州的同學(xué)們 可以加我V 15850277051 ，走內(nèi)推流程，有問必答！

總結(jié)

以上是生活随笔為你收集整理的关于Openlayers Overlay事件监听的一个坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。