仅在配备 Firefox 的 Surface Pro 3 上:
当用一根手指在元素上做出轻扫手势时,浏览器将触发wheel
事件,而不是touchmove
或mousemove
事件。如何停止滚轮行为,并允许单个手指始终被视为触摸/鼠标移动?
因此,我想将单指滑动视为一系列mousemove
或touchmove
,而不是wheel
事件。如果在此元素上滑动,我根本不希望单指滑动来滚动页面。这在Chrome和IE11中很容易做到。这在Firefox中似乎是不可能的。目前我认为这是一个错误,但可能缺少一些东西。
下面是一个简单的示例:
http://codepen.io/simonsarris/pen/PwbdRZ
var can = document.getElementById('can');
can.addEventListener('mousemove', function(e) {
// Will never happen on the Surface Pro 3 in Firefox
// Will happen in IE11 though
console.log('mouseMove')
});
can.addEventListener('touchmove', function(e) {
// Will never happen on the Surface Pro 3 in Firefox
// Will happen in Chrome though
console.log('touchMove')
});
// Stops the window from scrolling in firefox when you swipe on the element
// But stopping this does not allow the single touch gesture to register as mousemove or touchmove events
can.addEventListener('wheel', function(e) {
console.log('wheel')
e.preventDefault();
});
// consider also the 'DOMMouseScroll' event, though preventing this event will not stop firefox from panning the page.
因为我在wheel
中阻止默认,所以当一根手指向上或向下滑动时,滚动页面会停止
如果您在红色框中滑动,则在 Firefox 中会停止窗口滚动,但不会触发鼠标移动或触摸移动事件。(但是,如果您水平而不是垂直滑动,鼠标移动将触发)
触摸事件目前在桌面版 Firefox (36.0.4) 中被禁用,尽管它们在 Metro 模式下运行 Firefox 时或通过 dom.w3c_touch_events.enabled
设置显式启用它们时可以工作。有关更多信息,请参阅有关触摸事件的 MDN 文章。