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

Question

在Microsoft触摸设备(例如Surface Pro)上,在Chrome和IE上,可以捕获鼠标/指针/触摸事件,并在此过程中阻止滚动页面.

在Firefox上,在阻止页面滚动触摸时获得相同级别的活动似乎是不可能的.您可以通过阻止"滚动"来阻止页面滚动:

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

但Firefox似乎不会发出您可以侦听的鼠标/指针/触摸事件,因此您无法执行相同的操作.

这里有一个实例:

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

使用Surface上的触摸:您可以在Chrome和IE中的画布上绘图,但是您无法在Firefox中绘制它.如果您注释掉"wheel"监听器,Firefox将另外滚动页面.

所以问题是:在Firefox中获得HTML Element触摸交互需要什么,与系统上的其他浏览器相同？

Answer 1

考虑使用触摸事件.它支持跨浏览器(Firefox,Chrome,Edge).

解决方案很简单,处理触摸事件并防止默认设置.

考虑这个例子 -

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 - 触摸事件

触摸事件的简单演示可以在这里找到(mdn)或在这里(jsdfiddle)

检查这个更完整的例子(参考/演示) -

<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 Touch Events 在这里
• 在此处使用触摸事件
• 触摸事件简介+滚动+拖动此处
• 在此处使用触摸检测滑动
• 在此处滑动图片库
• 在线绘制演示 | 代码 这很好!
• 触摸事件详细这里

希望能帮助到你.