Перетаскивание курсора не приводит к изменению стиля курсора до завершения перетаскивания
Я хотел бы ответить на этот вопрос: Изменение курсора при перетаскивании в 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>Похоже, проблема заключалась в открытом DevTools. Это очень странная ошибка. Для справки, я использую Chrome версии 66.0.3359.139 (официальная сборка) (64-разрядная версия). Благодарю за ваш ответ. Не стесняйтесь размещать это как ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Похоже, это была ошибка в 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;};