JavaScript mapeando events de toque para events de mouse

Estou usando o controle deslizante YUI que opera com events de movimento do mouse. Eu quero fazê-lo responder a events touchmove (iPhone e Android). Como posso produzir um evento de movimento do mouse quando ocorre um evento touchmove? Espero que apenas adicionando um script no topo, os events touchmove sejam mapeados para os events de movimento do mouse e não precisarei alterar nada com o controle deslizante.

Tenho certeza que é isso que você quer:

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); } 

Capturei os events de toque e, em seguida, ativei manualmente meus próprios events de mouse para corresponder. Embora o código não seja de propósito geral como é, deve ser fácil adaptar-se à maioria das bibliotecas de arrastar e soltar existentes e, provavelmente, à maioria dos códigos de events de mouse existentes. Espero que esta ideia seja útil para pessoas que desenvolvem aplicações web para o iPhone.

Atualizar:

Ao postar isso, percebi que chamar preventDefault em todos os events de toque impedirá que os links funcionem corretamente. O principal motivo para chamar preventDefault é impedir o telefone de rolar, e você pode fazer isso chamando-o apenas no retorno de chamada do touchmove . A única desvantagem de se fazer isso dessa forma é que o iPhone, às vezes, exibe seu pop-up suspenso sobre a origem do arrasto. Se eu descobrir uma maneira de evitar isso, atualizarei este post.

Segunda atualização:

Eu encontrei a propriedade CSS para desativar a chamada: -webkit-touch-callout .

Ao longo das linhas da resposta do @Mickey Shine, o Touch Punch fornece o mapeamento de events de toque para clicar em events. Ele é construído para colocar esse suporte na interface do usuário do jQuery, mas o código é informativo.

Para futuros usuários, que retornarem aqui, o seguinte código pode ser usado:

 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]; }; }; })(); 

E então nos events usam como segue:

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

Eu finalmente encontrei uma maneira de fazer isso funcionar usando a solução do Mickey, mas em vez de sua function init. Use a function init aqui.

 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); } 

Se você ver ‘ filter_div ‘ é a área do gráfico onde temos o filtro do intervalo do gráfico e somente nessa área queremos rewrite nossos controles de toque!

Obrigado Mickey. Foi uma ótima solução.

Para fazer com que o código do @ Mickey funcione no Edge e no Internet Explorer, adicione as seguintes linhas em .css do elemento onde deseja que a simulação aconteça:

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

Essas linhas impedem o toque padrão para borda e IE. Mas se você adicioná-lo ao elemento errado, ele também desativa a rolagem (que acontece por padrão na borda e o IE nos dispositivos de toque).