点击事件未在传单中触发

Question

我正在为我的应用程序使用 Leaflet.js。 click 事件不会与 mouseover 事件一起触发。

   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）时，他们必须首先将鼠标移到标记上，这会打开一个弹出窗口在这个位置（根据您的"mouseover" 事件侦听器），因此弹出窗口现在正在接收点击，而不是您的标记。

你可以看到你的"click"监听器仍然可以通过将鼠标光标定位在弹出窗口“提示”旁边，它没有覆盖标记图标，但是鼠标光标仍然有点在标记：

现场试用：https://plnkr.co/edit/8Zu0cYeYATp2qY6ltn7N?p=preview

为了避免这个 UX 问题，您可以尝试使用 Tooltip 来代替 Popup。默认情况下，它将出现在坐标的一侧，而不是在其上方（这使得 Popup 覆盖了 Marker）。