JavaScript將觸摸事件映射到鼠標事件

Question

我正在使用與鼠標移動事件一起操作的YUI滑塊。我想讓它響應touchmove事件（iPhone和Android）。觸摸移動事件發生時，如何產生鼠標移動事件？我希望只需在頂部添加一些腳本，touchmove事件就會映射到鼠標移動事件上，而不必用滑塊來更改任何內容。

Answer 1

我相信這是你想要什麼：

function touchHandler(event) 
{ 
    var touches = event.changedTouches, 
     first = touches[0], 
     type = ""; 
    switch(event.type) 
    { 
     case "touchstart": type = "mousedown"; break; 
     case "touchmove": type = "mousemove"; break;   
     case "touchend": type = "mouseup"; break; 
     default:   return; 
    } 

    // initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //    screenX, screenY, clientX, clientY, ctrlKey, 
    //    altKey, shiftKey, metaKey, button, relatedTarget); 

    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); 
    event.preventDefault(); 
} 

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

我捕捉觸摸事件，然後手動解僱我自己的鼠標事件相匹配。雖然代碼不是特別通用，但適應大多數現有的拖放庫以及大多數現有的鼠標事件代碼應該是微不足道的。希望這個想法對於爲iPhone開發Web應用程序的人來說非常方便。

更新：

在發佈此，我注意到，呼籲所有觸摸事件，preventDefault將阻止正常的工作聯繫。要撥打preventDefault的主要原因是要停止滾動電話，並且只能通過撥打touchmove回撥來呼叫。這樣做的唯一缺點是iPhone有時會在拖動原點上顯示懸停彈出窗口。如果我發現一種方法來防止這種情況發生，我會更新這篇文章。

第二次更新：

我已經找到了CSS屬性關閉標註：-webkit-touch-callout。

Answer 2

沿着@Mickey Shine的回答，Touch Punch提供了觸摸事件到點擊事件的映射。它的構建是爲了將這種支持加入到jQuery UI中，但the code是提供信息的。

Answer 3

我終於找到了一種方法來使用Mickey的解決方案，而不是他的init函數。在這裏使用init函數。

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

如果你看到「filter_div」是圖表區域，我們有圖表範圍過濾器，只在這方面我們要改寫我們的觸摸控制！

謝謝米奇。這是一個很好的解決方案。

Answer 4

對於未來的用戶，誰復出這裏下面的代碼可用於：

var eventMap = {}; 

(function(){ 
var eventReplacement = { 
    "mousedown": ["touchstart mousedown", "mousedown"], 
    "mouseup": ["touchend mouseup", "mouseup"], 
    "click": ["touchstart click", "click"], 
    "mousemove": ["touchmove mousemove", "mousemove"] 
}; 


for (i in eventReplacement) { 
    if (typeof window["on" + eventReplacement[i][0]] == "object") { 
     eventMap[i] = eventReplacement[i][0]; 
    } 
    else { 
     eventMap[i] = eventReplacement[i][1]; 
    }; 
}; 
})(); 

然後在事件使用類似以下內容：

$(".yourDiv").on(eventMap.mouseup, function(event) { 
     //your code 
} 

Answer 5

爲了使@米奇的代碼工作在邊緣和Internet Explorer中，在要發生模擬的元素的.css中添加以下行：

.areaWhereSimulationHappens { 
    overflow: hidden; 
    touch-action: none; 
    -ms-touch-action: none; 
} 

這些行防止邊緣和IE的默認觸摸。但是，如果將它添加到錯誤的元素中，則它也會禁用滾動（這在邊緣和觸摸設備上的IE上默認會發生）。