Question

我正在一个页面上，我有一个可拖动的项目（容器内的地图）。当您单击并使用鼠标拖动时，地图会移动，一切都很好。然后，我想为触摸设备（例如智能手机或平板电脑）添加相同的功能。我在网上搜索并找到了一个工作脚本，它“改变”了鼠标输入的触摸输入，从而可以在不拖动整个页面的情况下拖动地图（这是标准行为）。这是使用

行完成的

event.preventDefault()

甚至可以通过计算触摸间隔多长时间来进行点击事件。我不是编码天才，所有这些编程都是由其他人完成的。你可以在Javascript Drag and drop for touch devices看到讨论（我已经使用了顶部答案中的原始代码以及顶部答案下方答案中的时间代码）。

到目前为止，这么好。现在可以拖动地图并单击其上的任何链接或页面，就像使用鼠标一样。这适用于我尝试的所有触摸浏览器（我没有尝试过很多，但我尝试过的那些）。唯一的问题是，您无法拖动页面本身，因为触摸的默认行为已被禁用。当页面内容（例如地图容器的大小）大于浏览器窗口时，这是一个问题。

幸运的是，也为此提供了答案（这是我在上面链接的页面上最底层的答案）：替换

event.preventDefault()

与

if (touches.length > 1) event.preventDefault();

如果您使用一根手指，则触摸的默认滚动/调整大小等有效，但如果您使用多个手指，则会阻止默认行为。换句话说：如果您使用两个手指，您可以拖动地图而不拖动页面（就像之前一样），但如果您使用一个手指，则可以拖动页面！我真的很喜欢这个解决方案，因为它看起来很优雅。

好吧，我在HTC Incredible手机的默认浏览器上添加了这条线并进行了测试（通往小屏幕的方式，但这就是我所拥有的）。默认浏览器名为“Internet”。一切都很完美！所以，我测试了Firefox和Opera，不幸的是，它们并没有完美运行。似乎一旦

event.preventDefault()

在“if”语句中，它被完全忽略，所以当我拖动地图时，它被拖动（因为触摸仍然被转换为拖动鼠标），但页面本身也被拖动，无论如何我使用的手指数量。简而言之：页面的行为就像没有 event.preventDefault（）触发了。

我已经环顾了好几个小时，并且怀疑需要为Firefox和Opera初始化或导入事件变量才能使用它，如下所述：jQuery event.preventDefault() not working in Firefox (JSFiddle included)

我的问题（最后）：这可能是正确的，我如何将事件“导入”“if”声明？

代码在这里（init（）函数由body onload触发）

    <script type="text/javascript">

    var clickms = 400;
    var lastTouchDown = -1;

    function touchHandler(event)
    {

    var touches = event.changedTouches,
    first = touches[0],
    type = "";

    var d = new Date();
    switch(event.type)
    {
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                      first.screenX, first.screenY,
                      first.clientX, first.clientY, false,
                      false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    if (touches.length > 1)
    {
    event.preventDefault();
    }

    }

    function init()
    {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
    }

    </script>

编辑：我应该补充说我已经尝试在if语句中插入一个警告语句，只是为了看看Firefox或Opera是否实际注册了双指手势。触发警报没有问题，因此问题可能是Firefox或Opera启动双指手势后，手势的标准行为（拖动或调整页面大小）无法停止，至少不是这样。 / p>

Answer 1

我似乎已经解决了这个问题（至少在我可以使用的浏览器上进行测试）

我所做的就是改变

    if (touches.length > 1) {
      event.preventDefault();
    }

到

    if (event.touches.length > 1) {
      event.preventDefault();
    }

现在可以使用两个手指拖动可拖动元素，而无需移动页面的其余部分。仍然可以用一根手指在Firefox和Opera上拖动地图，但这只是一件小事，只要你采用“当你想拖动时只用两根手指”的态度。

唯一的小问题是Firefox和Opera似乎都在他们选择关注的指尖之间来回跳跃，使可拖动元素稍微抖动，特别是当手指分开时。此行为不会显示在“Internet”浏览器中。

Firefox似乎忽略了event.preventDefault（）

1 个答案: