在触摸屏上处理鼠标和触摸事件
我正在编写应该支持鼠标和触摸交互的网络应用程序。 为了测试，我在Windows 7上使用了触摸屏设备。我尝试在最新的Firefox和Chrome canary中嗅探触摸事件并获得以下结果：
触摸Firefox触发触摸和相应的鼠标事件。 Chrome会触发touchstart/mousedown ， touchend/mouseup对，但mousemove以非常奇怪的方式touchmove一次/两次。
所有鼠标事件一如既往地处理。
在现代触摸屏上可以同时处理鼠标和触摸屏吗？ 如果Firefox触发一个对触摸和鼠标事件发生什么的touchmove用mousemove Chrome浏览器？ 我应该翻译所有鼠标事件来触摸，反之亦然？ 我希望找到正确的方式来创建响应式界面。
您应该检查触摸界面的可用性并根据该界面绑定事件。
你可以做这样的事情：
(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);
如果你想在同一时间处理两者，并且浏览器不能很好地将触摸事件转换为鼠标事件，你可以捕捉触摸事件并停止它们 - 然后相应的鼠标事件不应该被浏览器触发（你不会有双重事件）你可以自己将它作为鼠标事件触发或者只是处理它。
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);
您无法事先预测要侦听哪些事件（例如，在您的页面加载后，您可以插入一个USB触摸屏）。
相反，您应该始终听触摸事件和鼠标事件，但在处理的触摸事件上调用preventDefault（）以防止（现在是冗余的）鼠标事件被触发。 详情请参阅http://www.html5rocks.com/en/mobile/touchandmouse/。
MouseEvents和TouchEvents在技术上并不提供完全相同的功能，但对于大多数用途，它们可以互换使用。 这个解决方案不赞成一个，因为用户可能同时拥有鼠标和触摸屏。 相反，它允许用户使用他们希望的任何输入设备，只要它们在改变输入之前等待至少五秒。 当屏幕被点击时，此解决方案忽略触摸屏设备上的鼠标指针仿真。
var lastEvent = 3 ;
var MOUSE_EVENT = 1;
var TOUCH_EVENT = 2 ;
element.addEventListener('touchstart', function(event)
{
if (lastEvent === MOUSE_EVENT )
{
var time = Date.now() - eventTime ;
if ( time > 5000 )
{
eventTime = Date.now() ;
lastEvent = TOUCH_EVENT ;
interactionStart(event) ;
}
}
else
{
lastEvent = TOUCH_EVENT ; ;
eventTime = Date.now() ;
interactionStart(event) ;
}
}) ;
element.addEventListener('mousedown', function(event)
{
if (lastEvent === TOUCH_EVENT )
{
var time = Date.now() - eventTime ;
if ( time > 5000 )
{
eventTime = Date.now() ;
lastEvent = MOUSE_EVENT ;
interactionStart(event) ;
}
}
else
{
lastEvent= MOUSE_EVENT ;
eventTime = Date.now() ;
interactionStart(event) ;
}
}) ;
function interactionStart(event) // handle interaction (touch or click ) here.
{...}