单击事件不会在传单中触发

Question

我在我的应用程序中使用leaflet.js。 click事件不会随着鼠标悬停事件一起触发。

   layer.on({
                mouseover: function (e) {
                    L.popup().setLatLng(e.latlng)
                    .setContent("Test")
                    .openOn(map);
                },
                click: function () {
                    alert("Click");
                    map.fire("click", e);
                }
            });

我使用自定义标记而不是圆圈标记

    option.pointToLayer = function (feature, latlng) {
   var marker = L.marker(latlng);
                    var icon = L.icon({
            iconUrl: 'Image/InvestmentIcons/environmentalflow.png',
            iconSize: [12, 12], // size of the icon
        });

                        marker.options.icon = icon;
                        return marker;
                    }

Answer 1

当用户试图点击你的标记（这会触发你的"click"事件监听器，即显示你的alert）时，他们必须先将鼠标移到标记上，这会在此位置打开Popup（相应地使用您的"mouseover"事件监听器），因此Popup现在正在接收点击，而不是您的标记。

你可以看到你的"click"监听器仍然正常工作，只需将鼠标光标放在弹出“尖端”旁边，它不会覆盖标记图标，但鼠标光标仍然有点像一点点在标记上：

要试一试：https://plnkr.co/edit/8Zu0cYeYATp2qY6ltn7N?p=preview

要避免此UX问题，您可以尝试使用Tooltip而不是Popup。默认情况下，它将显示在坐标的一侧，而不是它上方（这使得Popup覆盖标记）。