一、問題產生：

我使用Overlay創建標繪操作的小方塊元素，如下代碼和如圖。

然后我監聽小方塊的mousedown事件。用原始的事件監聽：

element.addEventListener('mousedown',process_mousedown);

然后監聽map的pointermove事件

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

內部邏輯不用管。pc端測試，process_mousedown和process_pointmove兩個函數都能觸發。邏輯可以正常寫。

ok。換移動端。當然mousedown要添加額外的事件。

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

測試，發現process_mousedown函數可以正常觸發。但是process_pointmove這個函數卻怎么也觸發不了。

二、問題分析

跟蹤Openlayers的源碼。找到ol.map內分發事件的handleMapBrowserEvent，發現了這樣一段代碼。

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

我們都知道。當OverLay 不設置stopEvent屬性時，默認該屬性為true。即所有overlay都放在ol-overlaycontainer-stopevent這個div內

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

為什么pc端可以？因為pc端的pointermove 源頭元素都不是我的那個控制點DIV。但是對于移動端，因為我是按住這個控制點DIV進行拖動，所以源頭元素就是我的這個控制點DIV，所以被屏蔽了。

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

三、問題解決。

通過設置overlay的屬性stopEvent為false，可以暫時解決這個問題。因為我的控制點被放到map內部的ol-overlaycontainer容器中去了。pointermove事件的源頭也找不到我的控制點。所以沒有被屏蔽掉。

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

四、最終解決

問題解決了。我不能通過設置stopEvent為false解決問題。因為一旦設置了這個，我移動端pc端不管怎么監聽都無法拿到我要點擊的那個控制div。因為ol-overlaycontainer-stopevent永遠蓋在ol-overlaycontainer之上。事件都是從ol-overlaycontainer-stopevent傳遞出去的。

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

該對象內部有個_listerer的map表記錄了所有的注冊的監聽器：

發現其繼承自ol.Event.Target，ol.Event.Target繼承自ol.Disposable自然找到了操作該監聽器的方法：

于是解決方案：

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

最終測試。完美解決。

五、另外說一個坑

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。