谷歌地球API:鼠标悬停事件似乎被鼠标移动阻止，而鼠标按下

Google Earth API: mouseover event seems to be blocked by mousemove while mousedown

本文关键字：鼠标 移动 API 悬停 事件 谷歌地球      更新时间：2023-09-26

我正在制作一个页面，在Google地球的一个区域上布置一个白色正方形多边形的网格。当您单击一个时，它会将颜色更改为棕色，再次单击将其更改回白色。我试图得到它，所以当你鼠标按下和鼠标移动时，无论你鼠标悬停在什么多边形上也会变成棕色。以下是我设置事件侦听器的方法：

google.earth.addEventListener(ge.getGlobe(), 'mousedown', function(event) {
        var placemark = event.getTarget();
        if (placemark.getType() == 'KmlPlacemark' &&
                placemark.getGeometry().getType() == 'KmlPolygon') {
                event.preventDefault();
                event.stopPropagation();
                mbutton = true;
                console.log(mbutton);
                var lcolor = placemark.getStyleSelector().getLineStyle().getColor();
                var pcolor = placemark.getStyleSelector().getPolyStyle().getColor();
                if ( lcolor.get() == "ffffffff") {
                        lcolor.set('ff00008B');
                        pcolor.set('ff00008B');
                } else {
                        lcolor.set('ffffffff');
                        pcolor.set('ffffffff');
                }
        } 
});
for ( var i = 0; i < placemarks.length; i++ ) {
        google.earth.addEventListener(placemarks[i], 'mouseover', function(event) {
                if (mbutton) {
                        console.log('over' + event.getTarget().getId());
                        $(placemarks[i]).trigger('mousedown');
                } else {console.log('not: ' + event.getTarget().getId())}
        });
}
google.earth.addEventListener(ge.getGlobe(), 'mousemove', function(event) {
        if (mbutton) {
                console.log(event.getTarget().getId() + ' : ' + event.getTarget().getType());
                event.preventDefault();
                event.stopPropagation();
        }
});
google.earth.addEventListener(ge.getGlobe(), 'mouseup', function(event) {
        if (mbutton) {
                mbutton = false;
                console.log(mbutton);
        }
});
问题在于，看起来用户鼠标按下的任何多边形

都是鼠标移动将看到的唯一多边形，并且鼠标悬停根本不会触发，除非用户将鼠标悬停在多边形上，就好像在鼠标按钮没有按下的瞬间鼠标悬停有机会触发。以下是 Chrome 中事件侦听器的调试信息的输出：

1: true createRaster.js:307
2: 1 : KmlPlacemark createRaster.js:338
3: 1 : KmlPlacemark createRaster.js:338
4: [truncated for brevity]
5: 1 : KmlPlacemark createRaster.js:338
6: over2 createRaster.js:329
7: false

这是从鼠标向下移动到第一个多边形(第 1 行(和摩西到第二个多边形(第 2-6 行(和 mousupping(第 7 行(。在鼠标移动触发的整个过程中，它都停留在用户最初单击的目标上。当鼠标向上时，在鼠标向上事件触发鼠标悬停事件之前的一瞬间。

无论鼠标按钮是否按下，鼠标悬停事件都不应该触发吗？我的代码中是否有某些内容阻止此事件触发？

像这样：

var clicking = $(window).on("mousedown", function (e) {
    return true;
    e.preventDefault();
});
$(target).on("mouseover", function () {
    while (clicking == true) {
        doTheThing();
    }
});
相关文章：