在拖动完成之前,拖动光标不会应用光标样式更改

Psy*_*møn 3 javascript openlayers

我想跟进这个问题: Changing Cursor on Drag in openlayers 3

提供的答案是合理的,并且有一个可行的例子。我已经使用了基本的 OpenLayers 快速入门代码,并将用户的答案添加到其中进行测试,很遗憾,它不起作用。

发生的情况是,“pointerup”中定义的光标是起始光标,当您单击并按住以拖动地图时,它会保持为该光标,直到您松开鼠标按钮以停止拖动。您会看到手形图标发生非常短暂的变化,然后变回指针向上光标。它的行为就像在发生拖动操作时无法更改光标一样。

可以采取什么措施来解决这个问题?

下面是我的示例文件的完整代码。请注意,在 jsfiddle 中,它演示了预期的行为。但是当我创建一个文件(例如“test-drag.html”)并将其加载到 Chrome 中时,它的行为就像我所描述的那样。

<html>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<body>
<div id="map" class="map" style="width:1200px;height:800px"></div>
<script type="text/javascript">
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
	center: ol.proj.fromLonLat([37.41, 8.82]),
	zoom:2
  })
});

map.getViewport().style.cursor = "-webkit-grab";
map.on('pointerdrag', function(evt) {
    map.getViewport().style.cursor = "-webkit-grabbing";
});

map.on('pointerup', function(evt) {
    map.getViewport().style.cursor = "-webkit-grab";
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

小智 5

答案是,这是由开发工具开放引起的,正如 @m.cekiera 和 @Psym\xc3\xb8n 的评论中提到的。

\n