Firefox似乎忽略event.preventDefault（）

我正在一个页面上，我有一个可拖动的项目（容器内的地图）。当你用鼠标点击和拖动时，地图会移动，一切都很好。然后，我想为触摸设备（如智能手机或平板电脑）添加相同的功能。我搜索了网络，发现了一个工作脚本，它可以将触摸输入“更改”为鼠标输入，因此可以拖动地图而不拖动整个页面（这是标准行为）。这是通过使用线Firefox似乎忽略event.preventDefault（）

event.preventDefault()

甚至有可能有点击事件以及计时多长时间的触摸。我不是编码天才，所有这些编程都是由其他人完成的。你可以在Javascript Drag and drop for touch devices上看到讨论（我在最上面的答案中使用了原始代码以及在答案下面的时间代码）。

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

幸运的是，答案是为这一规定，以及（这是最底层的答案，我联系到上面的页面上）：更换

event.preventDefault()

与

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

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

好吧，我添加了行，并在HTC Incredible手机上的默认浏览器上进行测试（小屏幕方式，但它是我的）。默认浏览器被称为“Internet”。一切都完美无缺！因此，我测试了Firefox和Opera，不幸的是，它们并不完美。看来，一旦

event.preventDefault()

是“如果”语句中，它被完全忽略，所以当我拖动地图，它被拖到（如触摸仍然需要转换到鼠标的拖动），但是页面本身也被拖拽，不管我使用的手指的数量如何。简而言之：该页面的行为如同没有触发event.preventDefault（）没有。

我已经看了看周围的几个小时，已经开始怀疑事件变量需要进行初始化或进口的Firefox和Opera，以便能够使用它，如下所述：jQuery event.preventDefault() not working in Firefox (JSFiddle included)

我的问题（在最后一句）：这是否正确，我该如何将事件“导入”“if”语句？

的代码是在这里（在init（）函数是由身体的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语句，只是为了看看是否火狐或者Opera实际上记录了执行了双指手势。警报没有问题触发，所以问题可能在于，一旦Firefox或Opera启动了双指手势，手势的标准行为（拖动或调整页面大小）无法停止，至少不是这样。

来源

2012-09-25 Jakob Kramer

我似乎（在我手上进行测试的浏览器至少）

已经解决了这个问题，我所做的是改变

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

到

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

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

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

来源

2012-09-27 10:27:26

Firefox似乎忽略event.preventDefault（）

回答

相关问题