Microsoft Surface设备上的Firefox的交互性和触摸功能？

Question

在微软的触控设备（如Surface Pro）上，Chrome和IE可以捕捉鼠标/指针/触摸事件，并且在此过程中可以防止滚动页面。

在Firefox上，获取相同级别的活动，同时停止滚动触摸页面似乎是不可能的。您可以通过防止“车轮”滚动停止页：

can.addEventListener('wheel', function(e) { 
    console.log('stopping wheel') 
    e.preventDefault(); 
}, false); 

但Firefox似乎并没有发出鼠标/指针/触摸，你可以听，所以你不能做同样的动作事件。

这里有一个活生生的例子：

https://codepen.io/simonsarris/pen/PJwMay

随着于表面的触摸：您可以绘制在Chrome和IE在画布上，但你可以在Firefox不画。如果您注释掉“轮子”侦听器，则Firefox将另外滚动该页面。

所以问题是：在与系统上的其他浏览器进行奇偶校验时，需要什么才能在Firefox中获得HTML元素触摸交互？

Answer 1

考虑使用触摸事件。并支持跨浏览器（Firefox，Chrome，Edge）。

解决方法很简单，处理Touch Events并防止默认值。

考虑这个例 -

function startup() { 
    var el = document.getElementsByTagName("canvas")[0]; 
    el.addEventListener("touchstart", handleStart, false); 
    el.addEventListener("touchend", handleEnd, false); 
    el.addEventListener("touchcancel", handleCancel, false); 
    el.addEventListener("touchmove", handleMove, false); 
    log("initialized."); 
} 

element.addEventListener('touchstart', function(e){ 
    var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger) 
    startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser 
    statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px' 
    e.preventDefault() 
}, false) 

来源：MDN - Touch Events

的触摸事件简单的演示可以发现here(mdn)或here(jsdfiddle)

检查这个例子将更加完整（Reference/Demo） -

<div class="box" id="box1"> 
<h3> Touch Me! </h3> 
</div> 

<h3 id="statusdiv">Status</h3> 

<script> 

window.addEventListener('load', function(){ 

    var box1 = document.getElementById('box1') 
    var statusdiv = document.getElementById('statusdiv') 
    var startx = 0 
    var dist = 0 

    box1.addEventListener('touchstart', function(e){ 
     var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger) 
     startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser 
     statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px' 
     e.preventDefault() 
    }, false) 

    box1.addEventListener('touchmove', function(e){ 
     var touchobj = e.changedTouches[0] // reference first touch point for this event 
     var dist = parseInt(touchobj.clientX) - startx 
     statusdiv.innerHTML = 'Status: touchmove<br> Horizontal distance traveled: ' + dist + 'px' 
     e.preventDefault() 
    }, false) 

    box1.addEventListener('touchend', function(e){ 
     var touchobj = e.changedTouches[0] // reference first touch point for this event 
     statusdiv.innerHTML = 'Status: touchend<br> Resting x coordinate: ' + touchobj.clientX + 'px' 
     e.preventDefault() 
    }, false) 

}, false) 

</script> 

个

参考文献：

• MDN触摸事件here
• 使用触摸事件here
• 介绍使用触摸here
• 刷卡图片库here触摸事件+滚轮+拖动here
• 检测刷卡
• 在线描述：demo | code这很好！
• 详细here

触摸事件，希望它可以帮助。