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（）

回答

相關問題