在触摸屏上处理鼠标和触摸事件 [英] handle both mouse and touch events on touch screens

问题描述

我正在写Web应用程序，它应该支持鼠标和触摸交互。
为了测试，我在Windows 7上使用触摸屏设备。我尝试在最新的Firefox和Chrome canary中嗅探触摸事件，并得到以下结果：

触摸Firefox触发触摸和相应的鼠标事件。
Chrome fires touchstart / mousedown ， touchend / mouseup 对，但 mousemove 以非常奇怪的方式触发：一次/两次，而 touchmove 。

所有鼠标事件处理一如既往。

在现代触摸屏上有没有办法同时处理鼠标和touch evens？如果Firefox在Chrome中触发一对触摸和鼠标事件，那么 touchmove 与 mousemove 会发生什么？我应该翻译所有的鼠标事件触摸，反之亦然？我希望能够找到正确的方式来创建响应式界面。 解决方案

根据这一点。

您可以这样做：

  （function（）{
 if（'ontouchstart'in window）{
 window.Evt = {
 PUSH：'touchstart'，
 MOVE：'touchmove'，
 RELEASE：'touchend'
}; 
} else {
 window.Evt = {
 PUSH：'mousedown'，
 MOVE：'mousemove'，
 RELEASE：'mouseup'
}; 
} 
}（））; 
 
然后... 
 
 document.getElementById（'mydiv'）。addEventListener（Evt.PUSH，myStartDragHandler，false）; 
  

---

如果您想同时处理两个浏览器，并且不能很好地将事件转换为鼠标事件，您可以捕捉触摸事件并停止它们，然后相应的鼠标事件不应该被浏览器触发（你不会有双重事件），你可以自己把它作为鼠标事件或只​​是处理它。

  var mydiv = document.getElementsById（ 'mydiv'）; 
 mydiv.addEventListener（'mousemove'，myMoveHandler，false）; 
 mydiv.addEventListener（'touchmove'，function（e）{
 // stop touch event 
 e.stopPropagation（）; 
 e.preventDefault（）; 
 
 //转换为鼠标事件
 var clkEvt = document.createEvent（'MouseEvent'）; 
 clkEvt.initMouseEvent（'mousemove'，true，true，window，e.detail，
 e.touches [0] .screenX，e.touches [0] .screenY，
 e.touches [0] .clientX，e.touches [0] .clientY，
 false，false， false，false，
 0，null）; 
 mydiv.dispatchEvent（clkEvt）; 
 
 //或只处理触摸事件
 myMoveHandler（e）; 
}，false）; 
  

I'm writing web application which should support both mouse and touch interactions. For testing I use touch screen device with Windows 7. I've tried to sniff touch events in latest Firefox and Chrome canary and got the following results:

On touch Firefox fires touch and corresponding mouse event. Chrome fires touchstart/mousedown, touchend/mouseup pairs, but mousemove fired in very strange manner: one/two times while touchmove.

All mouse events handled as always.

Is there any way to handle mouse and touch evens simultaneously on modern touch screens? If Firefox fires a pair of touch and mouse event what happens on touchmove with mousemove in Chrome? Should I translate all mouse events to touch or vice versa? I hope to find right way to create responsive interface.

解决方案

You should rather check availability of touch interface and bind events according to that.

You can do something like this:

(function () {
    if ('ontouchstart' in window) {
        window.Evt = {
            PUSH : 'touchstart',
            MOVE : 'touchmove',
            RELEASE : 'touchend'
        };
    } else {
        window.Evt = {
            PUSH : 'mousedown',
            MOVE : 'mousemove',
            RELEASE : 'mouseup'
        };
    }
}());

// and then...

document.getElementById('mydiv').addEventListener(Evt.PUSH, myStartDragHandler, false);

---

If you want to handle both in same time and browser does not translate well touch events into mouse events, you can catch touch events and stop them - then corresponding mouse event shouldn't be fired by browser (you won't have double events) and you can fire it yourself as mouse event or just handle it.

var mydiv = document.getElementsById('mydiv');
mydiv.addEventListener('mousemove', myMoveHandler, false);
mydiv.addEventListener('touchmove', function (e) {
    // stop touch event
    e.stopPropagation();
    e.preventDefault();

    // translate to mouse event
    var clkEvt = document.createEvent('MouseEvent');
    clkEvt.initMouseEvent('mousemove', true, true, window, e.detail, 
                 e.touches[0].screenX, e.touches[0].screenY, 
                 e.touches[0].clientX, e.touches[0].clientY, 
                 false, false, false, false, 
                 0, null);
    mydiv.dispatchEvent(clkEvt);

    // or just handle touch event
    myMoveHandler(e);
}, false);

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