问题
我用官方例子中的Popup做了一个属性查看面板。因为图片需要水平滚动,在PC端浏览器通过鼠标拖动滑动条是没有问题的。但在手机浏览器里却出现了问题,拖动完全没有反应。
原因
官方Github也有人提到过类似的问题:
- Overlay: No touch scrolling in ol.Overlay #5243
- Touch event default behaviours disabled in control preventing scrolling #3253
由其中的描述可以知道Overlay的touchmove事件被阻止是有理由的。如果不加以阻止的话,那么我们拖动overlay的时候地图也跟着动了。这个touchmove事件连同其它几个事件被阻止传递到地图视口,以防止我们无法操作Overlay里面的内容。举个例子,如果双击事件没有被阻止传递的话,那么双击Overlay就会出现地图级别放大。
解决
正如#3253所解决的那样,我们需要对Overlay里面需要滚动的内容单独进行操作。捕获touchmove事件,并在事件处理函数里面阻止它进一步冒泡。
// 阻止事件冒泡
$is.on('touchmove', function (e) {
e.stopPropagation();
})
对于Openlayers如何禁用Overlay里的touchmove,我目前还不清楚这是如何实现的,留待考证。