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

问题

  我用官方例子中的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，我目前还不清楚这是如何实现的，留待考证。