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

【问题标题】：Dragging cursor does not apply cursor style change until drag is complete在拖动完成之前，拖动光标不会应用光标样式更改
【发布时间】：2018-05-02 06:54:14
【问题描述】：

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

【问题讨论】：

这似乎是 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;};
看来打开 DevTools 是个问题。这是一个非常奇怪的错误。作为参考，我使用的是 Chrome 版本 66.0.3359.139（官方版本）（64 位）。谢谢您的答复。随意发布它作为答案。

标签： javascript openlayers

【解决方案1】：

答案是这是由开发工具打开引起的，正如 @m.cekiera 和 @Psymøn 在 cmets 中提到的那样。

【讨论】：