Question

我正在制作一张传单地图，我试图在鼠标悬停在线上时突出显示一个线图层，当该线显示一个弹出窗口时。当弹出窗口未打开时，不应再突出显示该行（除非鼠标当然悬停在它上面）。

使用mouseover和mouseout事件悬停时，我已成功设法突出显示该行。我还设法在使用popupopen和popupclose事件显示弹出窗口时突出显示该行。但是，仅当我单独使用这些事件时，亮点才有效。只要我将它们组合在一起并尝试同时获得高光，只有悬停的高光效果才有效。所以似乎mouseover / mouseout事件正在覆盖popupopen / popupclose事件。 有谁知道为什么会这样或我如何解决它？

我试图为每个事件调用不同的函数并更改事件的顺序，但它没有任何区别。

这是我目前的代码，它没有按照我的意愿去做。如果删除了mouseover / mouseout事件，则会显示popupopen / popupclose事件的高亮显示。

function allSubcommissionsHighlight(e) {
    e.target.setStyle({
        'color': '#00C5CD',
        'weight': 4,
        'opacity': 1
        });
    }
function allresetSubcommissionsHighlight(e) {
    e.target.setStyle({
        'color': '#256729',
        'weight': 2.5,
        'opacity': 0.5
        });
    }
function allSubcommissionsStyle(feature) {
                return {
                    "weight": 2.5,
                    "color": "#256729"
                };
            }
var allSubcommissions = new L.geoJson(null, {
    style: allSubcommissionsStyle,
        onEachFeature: function (feature, layer){
            if (feature.properties){
                var content = '<table id="infotable">' +
                              '<caption class="tablecaption">' + feature.properties.STATE + '</caption>' +
                              '<tr class="tabletr">' + '<th class="tableth">Submission</th>' + '<td class="tabletd">' + "<a href='" + feature.properties.Link + "'target='_blank'>" + feature.properties.ECS_ID_NUM + "</a>" + '</td>' + '</tr>' +
                              '<tr class="tabletr">' + '<th class="tableth">Status</th>' + '<td class="tabletd">' + feature.properties.STATUS + '</td>' + '</tr>' +
                              '<tr class="tabletr">' + '<th class="tableth">Committee</th>' + '<td class="tabletd"></td>' + '</tr>' +
                              '<tr class="tablenotr">' + '<th class="tablesubth">Chair</th>' + '<td class="tabletd">' + feature.properties.C + '</td>' + '</tr>' +
                              '<tr class="tablenotr">' + '<th class="tablesubth">Vice Chair(s)</th>' + '<td class="tabletd">' + feature.properties.VC + '</td>' + '</tr>' +
                              '<tr class="tablenotr">' + '<th class="tablesubth">Members</th>' + '<td class="tabletd">' + feature.properties.M + '</td>' + '</tr>' +
                              '<tr class="tabletr">' + '<th class="tableth">' + "<a href='" + feature.properties.Image + "'target='_blank'><img src='" + feature.properties.Image + "'width='" + "50" + "'length='" + "50" + "'/> </a>" + '</th>' + '<td class="tabletd">Click on the image to see it in full size</td>' + '</tr>' +
                              '<table>';
                    layer.bindPopup(content);

                    layer.on({
                        mouseover: allSubcommissionsHighlight,
                        mouseout: allresetSubcommissionsHighlight,
                        popupopen: allSubcommissionsHighlight,
                        popupclose: allresetSubcommissionsHighlight
                    });
            }
        }
});
$.getJSON('geojson/Subcommissions/all_Subcommissions.geojson', function (data) {
          allSubcommissions.addData(data);
});

如何解决mousover事件覆盖Leaflet中的popupopen事件？

0 个答案: