开源

Openlayers的Overlay里面不支持移动端滚动事件

2017-12-13  本文已影响31人  大洪

问题

  我用官方例子中的Popup做了一个属性查看面板。因为图片需要水平滚动,在PC端浏览器通过鼠标拖动滑动条是没有问题的。但在手机浏览器里却出现了问题,拖动完全没有反应。

图片无法在手机上水平滚动

原因

  官方Github也有人提到过类似的问题:

  1. Overlay: No touch scrolling in ol.Overlay #5243
  2. 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,我目前还不清楚这是如何实现的,留待考证。

上一篇下一篇

猜你喜欢

热点阅读