【问题标题】:Google Earth API: mouseover event seems to be blocked by mousemove while mousedownGoogle Earth API:mouseover 事件似乎被 mousemove 阻止,而 mousedown
【发布时间】:2013-09-28 12:33:33
【问题描述】:

我正在制作一个页面,该页面在 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);
        }
});

问题在于,看起来用户 mousedowns 的任何多边形都将是 mousemove 将看到的唯一多边形,并且 mouseover 根本不会触发,除非用户将鼠标悬停在多边形上,就好像在鼠标移动的瞬间按钮未按下鼠标悬停有机会触发。以下是 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 行)。在 mousemove 触发的整个过程中,它一直停留在用户最初单击的目标上。当按钮被 mouseup 时,在 mouseup 事件触发 mouseover 事件之前的那一瞬间。

无论鼠标按钮是否按下,mouseover 事件是否都应该触发?我的代码中有什么东西阻止了这个事件的触发吗?

【问题讨论】:

    标签: javascript dom-events google-earth google-earth-plugin


    【解决方案1】:

    类似这样的:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多