javascript - 在 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 中的 Canvas 上绘图，但不能在 Firefox 中绘图。如果您注释掉“wheel”监听器，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
• Touch 事件 + Scroll + Drag 简介 here
• 使用触摸检测滑动 here
• 滑动图片库 here
• 在线画图 demo | code 这很好!
• 详细触摸事件 here

希望对您有所帮助。