Javascript 触摸地图框滚动页面

我试图在一个布局上实现MapBox，这个布局占据了页面的100%。我已经禁用了地图缩放选项，但当尝试在地图填充视口的触摸设备上滚动时，问题会出现。我可以覆盖它还是让浏览器将其视为图像？

删除其余的侦听器-您可能仍然拥有的侦听器是拖动的

是的，您可以通过将传单功能设置为不执行任何操作来停止Mapbox侦听器阻止默认操作：

L.DomEvent.preventDefault = function(e) {return;}

若要删除浏览器在图元周围放置的轮廓，否则将无法删除该轮廓，可以添加：

*:focus {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
}

这允许我在触摸设备上滚动，尽管我只在Android上测试过。请注意，这可能会对您的应用程序产生其他后果-通过进入mapbox.js并仅从您需要的侦听器中删除此调用，可能可以防止这些后果。
此示例已得到改进：缺少的行是：


if（map.tap）map.tap.disable（）；

这将防止地图终止触摸设备上的点击事件。
对于那些希望根据页面大小动态启用/禁用地图框滚动/缩放等功能的用户（如我所做），您可以尝试：

$(document).ready(function() {
    $(window).on('resize', updateMap);
});

function updateMap() {
  var width = $(window).width();
  if (width < 768) {
    map.scrollWheelZoom.disable();
    map.doubleClickZoom.disable();
    map.dragging.disable();
    if (map.tap) map.tap.disable();
  }
  else {
    map.scrollWheelZoom.enable();
    map.doubleClickZoom.enable();
    map.dragging.enable();
    if (map.tap) map.tap.enable();
  }
}

$（文档）.ready（函数（）{
$（窗口）.on（'resize'，updateMap）；
});
函数updateMap（）{
变量宽度=$（窗口）.width（）；
如果（宽度<768）{
map.scrollWheelZoom.disable（）；
map.doubleClickZoom.disable（）；
map.draging.disable（）；
if（map.tap）map.tap.disable（）；
}
否则{
map.scrollWheelZoom.enable（）；
map.doubleClickZoom.enable（）；
map.draging.enable（）；
if（map.tap）map.tap.enable（）；
}
}

将768替换为适用于布局的相应幻数。假设使用jQuery。
mapbox中的
拖动
参数的问题在于，它控制使用鼠标或其他定点设备的按住拖动和使用触摸拖动的滑动运动。我不确定其他答案是否能澄清这一主要问题

我认为OP的核心问题是，我们都喜欢点击拖动，认为它很容易使用，但我们不喜欢触摸拖动，因为它干扰了滚动整个页面的能力

这是我最后使用的代码行。这取决于Modernizer和jQuery，但是如果需要的话，您可以在没有它们的情况下编写类似的东西

// disable dragging the map on touch devices only
if ($('html').hasClass('touch')) map.dragging.disable();

通过CSS的简单解决方案：
指针事件：无
太棒了！这对我来说效果很好，但是iPad上的另一个用户现在在点击工具提示图标时遇到了问题。除非我添加一个alert（）click事件，否则它们不会保持打开状态。我一直在想办法解决这个问题。这看起来非常棘手。你基本上是在完全使用地图上的所有功能。有一些选项可以控制您可能要禁用的每个元素，同时保持其他元素的运行。这将“禁用点击处理程序”，如中所述-不禁用OP询问的触摸设备上的地图拖动