拖动光标时,直到拖动完成才应用光标样式的更改。

3
我想跟进这个问题: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>


4
似乎在Chrome版本50及以下存在一个漏洞 - 当DevTools打开时,问题是否出现?您是否尝试关闭DevTools?另外,我认为最好在这里使用纯CSS,例如:.ol-viewport {cursor: move; cursor: grab;cursor: -moz-grab;cursor: -webkit-grab;} .ol-viewport:active { cursor: grabbing ;cursor: -moz-grabbing ;cursor: -webkit-grabbing;}; - m.cekiera
5
看起来是因为打开了DevTools才会出现这个问题。这是一个非常奇怪的bug。供参考,我使用的是Chrome版本66.0.3359.139(官方版本)(64位)。感谢您的回复。请随意将其发布为答案。 - Psymøn
1个回答

4
答案是由于Dev Tools被打开,正如@m.cekiera和@Psymøn在评论中提到的那样。

1
这个问题一直困扰着我,我刚好看到了你的帖子...原来是开着开发工具导致的。谢谢! - Timbo773

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接