Leaflet中实现点击tooltip触发事件功能

背景：

因为公司的GIS项目都是基于Leaflet搭建的。最近有同事在开发项目的时候问我leaflet中有什么方法可以来实现点击tooltip实现触发事件功能。最开始听到这个问题时候，第一时间想着像给marker直接加on（‘click’，function（））的逻辑实现。但是加了之后发现发现click触发的方法虽然添加到了tooltip中，但是并没办法实现能完成点击触发该方法的功能，经过思考以及查阅相关文档资料成功解决了这个问题。所以记录一下。并且作为一名刚转行的菜鸟，抱着学习的态度想知道自己思路存在的问题，所以发出来希望得到大佬们的知点。

一、考虑实现的思路

拿到marker的tooltip的html元素，然后给元素添加事件监听器的方法

//1.new一个带有坐标的marker并添加到地图中
const marker = this.L.marker([39.909186, 116.397411]).addTo(this.map);
//2.给marker绑定一个bindTooltip
      marker.bindTooltip("hello", {
        direction: "right",
        permanent: true,
        offset:[0,-5],
        opacity: 0.9,
        className:'toolclick',
      });
      marker.bindPopup('1111111')
//实现tooltip点击触发事件的方法
      this.fireTooltip(marker);
      fireTooltip(target){
      //拿到marker的tooltip实例对象
        let mytooltip = target.getTooltip()
      //获取到tooltip的html元素
        let myel = mytooltip._container
      //给div元素加上事件监听器
        myel.addEventListener('click',this.tooltipfuc)

    },
tooltipfuc（）{
  console.log('...........')
}

注意 运行代码以后，发现并没有实现控制台的打印，主要是因为tooltip并没有鼠标可点击功能。这是因为，lealet的tooltip的css样式中把pointer-events设置成了none,所以需要给tooltip重新加上pointer-events。

.toolclick{
cursor: pointer;
pointer-events: auto !important;
}

这样就可以实现点击tooltip触发功能的逻辑。

实现的思路二

还有一种方法，可以直接给tooltip实例中的_container.onclick赋值的方法形式实现点击事件触发。这样就可以实现功能

mytooltip._container.onclick = ()=>{ console.log('333333333') }

二者区别

方法一是使用js的addEventListener()方法给DOM元素加上事件监听机制，通过console.log打印的tooltip时候并不会打印出addEventListener监听的click事件的函数，而使用方法二，因为是直接给tooltip..container.onclick加上函数（相当相当于给tooltip下的..container数据中的名为onclick的data赋值方法），所以再console.log打印tooltip时候会打印出click事件的方法函数。

扩展

tooltip的options中有一个interactive，这个方法是给tooltip加入交互事件，但是添加之后发现会触发popup。不光会触发tooltip的click事件，同时也会触发popup。并且如果没有给tooltip添加事件监听器，tooltip也不会实现鼠标单击触发函数的功能。

最后

经验不足希望大佬能多指出错误并多指点。