我有一个 openlayers map ，并且我已将一个 div 放置在 map 组件内部/上方。
这工作正常，但是当拖动 map 时，如果鼠标移动穿过/越过 div，拖动操作就会终止。
如何避免拖动操作终止？
谢谢，p。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
// create map
var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
map.zoomToMaxExtent();
// put div over map
Position.clone($("map"), $("overlay"), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>
编辑:使用接受的答案的解决方案:
<div class="mapDragThrough">some content which gets positioned over the map</div>
initialise: function()
{
this.map.events.register("movestart", this, this.applyDragThrough);
this.map.events.register("moveend", this, this.applyDragThrough);
},
applyDragThrough: function(event)
{
var elements = Element.select(document.body, ".mapDragThrough");
var value = this.map.dragging ? "none" : "auto";
elements.invoke("setStyle", {"pointerEvents":value});
},
最佳答案
您可以将overlay DIV 的pointer-events css 属性设置为none。
这会导致元素根本不接收鼠标事件，从而允许 map 拖动继续不间断。
这是一个工作示例:
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
// create map
var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
map.zoomToMaxExtent();
// put div over map
Position.clone($("map"), $("overlay").setStyle({'pointerEvents': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>
关于javascript - 允许拖动位于 map 上方的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5577851/