一、問題產(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端測(cè)試，process_mousedown和process_pointmove兩個(gè)函數(shù)都能觸發(fā)。邏輯可以正常寫。

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

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

測(cè)試，發(fā)現(xiàn)process_mousedown函數(shù)可以正常觸發(fā)。但是process_pointmove這個(gè)函數(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屬性時(shí)，默認(rèn)該屬性為true。即所有overlay都放在ol-overlaycontainer-stopevent這個(gè)div內(nèi)

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

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

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

三、問題解決。

通過設(shè)置overlay的屬性stopEvent為false，可以暫時(shí)解決這個(gè)問題。因?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è)置了這個(gè)，我移動(dòng)端pc端不管怎么監(jiān)聽都無法拿到我要點(diǎn)擊的那個(gè)控制div。因?yàn)閛l-overlaycontainer-stopevent永遠(yuǎn)蓋在ol-overlaycontainer之上。事件都是從ol-overlaycontainer-stopevent傳遞出去的。

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

該對(duì)象內(nèi)部有個(gè)_listerer的map表記錄了所有的注冊(cè)的監(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);

最終測(cè)試。完美解決。

五、另外說一個(gè)坑

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

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

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

總結(jié)

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

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