Question

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

在Firefox上，在阻止页面滚动触摸时获得相同级别的活动似乎是不可能的。您可以通过阻止＆＃34; wheel＆＃34;：

来阻止页面滚动

Javascript

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

这里有一个实例：

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

在Surface上触摸：您可以在Chrome和IE中的画布上绘图，但无法在Firefox中进行绘制。如果你注释掉＆＃34; wheel＆＃34;在监听器中，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

希望它有所帮助。

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

1 个答案: