JavaScript将触摸事件映射到鼠标事件 [英] JavaScript mapping touch events to mouse events

问题描述

我正在使用与鼠标移动事件一起操作的YUI滑块。我想让它回应touchmove事件（iPhone和Android）。当touchmove事件发生时，如何生成鼠标移动事件？我希望只是通过在顶部添加一些脚本，touchmove事件将被映射到鼠标移动事件，我将不必使用滑块更改任何内容。

I'm using the YUI slider that operates with mouse move events. I want to make it respond to touchmove events (iPhone and Android). How can I produce a mouse move event when a touchmove event occurs? I'm hoping that just by adding some script at the top that touchmove events will get mapped to the mouse move events and I won't have to change anything with the slider.

推荐答案

我确信这就是你想要的：

I am sure this is what you want:

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应用程序的用户会派上用场。

I've captured the touch events and then manually fired my own mouse events to match. Although the code isn't particularly general purpose as is, it should be trivial to adapt to most existing drag and drop libraries, and probably most existing mouse event code. Hopefully this idea will come in handy to people developing web applications for the iPhone.

更新：

在发布此消息时，我注意到在所有触摸事件上调用 preventDefault 会阻止链接正常工作。调用 preventDefault 的主要原因是阻止手机滚动，你可以通过只在 touchmove 回调。这样做的唯一缺点是iPhone有时会在拖动原点上显示其悬停弹出窗口。如果我发现了一种方法可以阻止这种情况，我会更新这篇文章。

In posting this, I noticed that calling preventDefault on all touch events will prevent links from working properly. The main reason to call preventDefault at all is to stop the phone from scrolling, and you can do that by calling it only on the touchmove callback. The only downside to doing it this way is that the iPhone will sometimes display its hover popup over the drag origin. If I discover a way to prevent that, I'll update this post.

第二次更新：

我找到了关闭标注的CSS属性： -webkit-touch-callout 。

I've found the CSS property to turn off the callout: -webkit-touch-callout.

这篇关于JavaScript将触摸事件映射到鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！