![在触摸屏上处理鼠标和触摸事件]( "在触摸屏上处理鼠标和触摸事件")
本文介绍了在触摸屏上处理鼠标和触摸事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在写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.
解决方案
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);
这篇关于在触摸屏上处理鼠标和触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！