使按鈕不相應leaflet的地圖事件

此文是博主原創，僅做爲工作積累

背景

系統應用了leaflet的地圖庫，庫自帶的zoom、fullscreen、layers等也都有用到，業務需要自己添加了幾個按鈕，樣式爲:

class='leaflet-control leaflet-bar'

與leaflet庫自帶功能的按鈕樣式一樣，看上去很漂亮，但是在自添加按鈕上點擊、雙擊、拖動時會產生地圖事件。

解決方法

給leaflet的dom添加事件監聽，若自添加的按鈕點擊，則阻止事件調用。具體代碼如下：

html部分:

<div className="leaflet-control leaflet-bar">
    <a title="上一個" id="pre">
        <i className="fa fa-angle-up fa-2x"></i>
    </a>
</div>

js部分：

componentDidMount() {
    const el = document.getElementById('pre');
    L.DomEvent.addListener(el, 'click', function (e) {
      L.DomEvent.preventDefault(e);
    });
    L.DomEvent.addListener(el, 'mousedown dblclick', function (e) {
      L.DomEvent.stopPropagation(e);
    });
  }

組件掛載完成後，獲取按鈕元素，給按鈕元素的點擊事件添加preventDefault()方法，阻止默認的行爲，給按鈕元素的拖動、雙擊添加stopPropagation()，阻止地圖平移和縮放。使按鈕就像leaflet庫封裝好的功能一樣。