为什么 openlayers 不检测我笔记本电脑的触摸事件？答案

【问题标题】：Why isn't openlayers detecting touch events from my laptop?为什么 openlayers 不检测我笔记本电脑的触摸事件？
【发布时间】：2020-03-05 04:59:22
【问题描述】：

我正在使用 OpenLayers 6.2.1 开发应用程序。为了针对移动设备对其进行优化，我试图在用户触摸屏幕时增加 hitTolerance。 According to the documentation, the map is supposed to be able to detect "touchOnly" events. 但是，当我在触摸屏笔记本电脑上执行触摸交互时，响应触摸事件的函数未检测到该事件：

map.on('touchOnly', function() {
    hitTolerance = 5;
    console.log('touch')
});

相反，这些触摸事件触发了我的点击功能。 mouseOnly 似乎有类似的问题，从我的鼠标触发的事件被检测为单击事件而不是 mouseOnly 事件。有没有我可以实施的解决方法？

快速编辑-我使用的是谷歌浏览器，也无法使用以下方法记录触摸事件：

map.addEventListener("touchstart", function () {
    hitTolerance = 5;
    console.log('touch');
});

【问题讨论】：

您是否包含了您正在使用的版本中的 ol.css？
是的，我包含了 ol.css

标签： javascript openlayers openlayers-6

【解决方案1】：

ol/Map 不会触发 touchOnly 使用 singleclick 代替或其他事件映射可以处理，例如 movestart，请参阅 https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html
它同时处理鼠标和触摸事件。

【讨论】：

正确。 touchOnly 是一个条件，而不是一个事件类型。

【解决方案2】：

我找到了合适的解决方法。

在我的代码前面，我这样声明了 var 映射：

var map = new ol.Map({
    target: 'map', 
    view: new ol.View({
        center: [-9099568, 4192168],
        zoom: 3,
        projection: 'EPSG:3857',
    })
});

目标“地图”指的是我的 HTML 的这一部分：

<body>
    <div id="map" class="map"></div>
</body>

所以，我能够使用这条线检测地图上的触摸事件：

document.getElementById('map').addEventListener('touchstart', function () {
    console.log('touch');
});

由于某种原因，ol map 对象无法检测到触摸，但它的容器可以。

【讨论】：