leaflet中的事件穿透

在总结方法之前，先总结一下问题。

用过leaflet的人都知道，leaflet中有这样一个方法：

L.geoJSON(data, {
style: function (feature) {
return {color: feature.properties.color};
}
}).bindPopup(function (layer) {
return layer.feature.properties.description;
}).addTo(map);

这个方法可以将封装好的GeoJson直接转化为FeatureGroup，非常方便。

GeoJson 的 featureType 有多种，这里拿 Point 和 Polygon 两类来举例说明，它们在 leaflet 中是两个代表。Point 类型的 geojson 数据在转化为地图图层的渲染方式是 marker，本质上是 div，也就是说，如果你的 geojson 里有 1 万条数据，那它就会在地图上创建 1 万个 div，很恐怖有木有，事实上也是不可取，因为一口气创建一万个 div 还是带来了很大的工作量，一般配置的电脑上运行这样的页面会卡出翔；再说 Polygon 多边形类型，Polygon  类型的 geojson 数据在转化为地图图层的渲染方式是 Canvas，这与 marker 有本质上的区别，即使你的 geojson 里有 1 万条数据，它也只会在其所在的 Pane 上创建 1 个 Canvas标签，页面地图流畅程度丝毫不受影响。 

说到这里，其实离本文的问题已经跑远了，但说这些也是为了更好的理解这个问题或者说现象。div 是有层级关系（zIndex）的，而且这种关系是非常容易被控制的，任何时候我们都可以很轻易去改变，那么 Canvas 呢？

在 leaflet 的使用中可能会碰到这样的情况，在同一层的 Pane 上，比如在 “ overlayPane ” 上，同时定义了以三角形为主和以四边形为主的 Polygon 类型的 FeatureGroup，因此最后渲染出的页面应该是这两个 Feature Group 的内容展示在同一个 Canvas 标签中，假如它们分别都绑定了各自的popup事件，而恰好它们在地图上的区域有所交叉和重叠（假设三角形在四边形的上方，即三角形覆盖了四边形的重叠区域），那这下子就尴尬了，当点击地图上它们的重叠区域时，这个问题的高潮也就来了。

从理论上无非四种结果：触发三角形的popup；触发四边形的popup；二者都没触发；二者都触发了。

而从测试后的事实的表象来看，无论是哪儿的重叠区域，被触发的，永远是下方被覆盖的四边形。

一开始我是懵比的，我觉得这是一个诡异的bug，一个问题的发生找不到合乎逻辑的解释。寥寥数行代码我反复看的心疲力乏，有一句话最能描述我当时的心境，理智让我怀疑一切！

好了，不兜圈子了，这个bug神秘的面纱下，其实就是事件穿透，事实的本质是最后一种预想，二者都触发了。leaflet 中 popup 有个特性，整个地图中有且只能有一个 popup 会被触发，事情的真相是，当鼠标点击它们的重叠区域时，首先会触发位于上方的三角形，紧接着触发下方的四边形。触发四边形的过程中会解除掉三角形的触发状态。这就是真相，一个典型的事件穿透问题。

搞清楚了问题的来龙去脉，解决问题的思路就一下打开了，可能稍微棘手点的就是，popup事件都是绑定在同一个canvas中的每一个单元上。

直接上代码，后面不想再多说了，还是要留下一些思考的空间。

var level_active = false;
var ship_active = false;

 

/*=============================================== （实时）通航等级 ====================================================*/
function getPassLevelLayer() {
if (grade_cache == "") {
return;
}
levelLayer = L.geoJson(grade_cache, {
style: function (feature) {
return {color: feature.properties.color, weight: weightValueArray[map.getZoom()], pane: 'overlayPane'};
},
onEachFeature: function (feature, layer) {
layer.bindPopup(eachFeaturePopup(feature));
layer.on("mouseover",function(){
level_active = true;
}).on("mouseout",function () {
level_active = false;
}).on('click',function () {
if(level_active&&ship_active){
ship_popup_obj.openPopup();
}
});
}
});
return levelLayer;
}

 

/*===================================================== 船 舶 ========================================================*/
function loadShipSoapLayer() {
if (shipSoapLayer == null) {
shipSoapLayer = L.geoJson(ship_soap_cache, {
style: function (feature) {
return {
fillColor: feature.properties.Color,
fillOpacity: 1,
color: "black",
weight: 1,
pane: 'overlayPane'
}; 

},
onEachFeature: function (feature, layer) {
layer.bindPopup(eachShipFeaturePopup(feature), {
closeButton: false,
className: "ShipSoap",
Ship_Id: feature.properties.ShipId
}).on('popupopen ', function (e) {
if(level_active&&ship_active){
ship_popup_obj = e.target;
}
var shipid = map._popup.options.Ship_Id;
$('.ShipSoap-Foot_Btn').on('click', function () {
window.layer.open({
type: 2,
skin: 'layui-layer-hei',
title: '通航查询',
shadeClose: false,
shade: [0.9, '#6b6b6b'],
maxmin: false,
area: ['100%', '100%'],
content: 'ship.html&shipId=' + shipid
});
})
}).on('popupclose', function () {
$('.ShipSoap-Foot_Btn').unbind();
}).on("mouseover",function(){
ship_active = true;
}).on("mouseout",function () {
ship_active = false;
});
}
}).setZIndex('9999');
}
return shipSoapLayer;
}