【发布时间】: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