Question

有没有办法将此Javascript功能用作触摸屏设备的触摸事件？

var down = false;
var scrollLeft = 0;
var x = 0;

var timeline = document.getElementById('timeline');

timeline.addEventListener('mousedown', function(e) {
    down = true;
    scrollLeft = this.scrollLeft;
    x = e.clientX; 
});

timeline.addEventListener('mouseup', function() {
    down = false;
});

timeline.addEventListener('mousemove', function(e) {
    e.preventDefault();
    if(down) {
        this.scrollLeft = scrollLeft + x - e.clientX;
    }
});

timeline.addEventListener('mouseleave', function() {
    down = false;
});

以下是其中的一个小提琴：http://jsfiddle.net/AdMFu/4/

Answer 1

对于IE移动版，您使用Microsoft pointer system。您只需将mousedown更改为MSPointerDown（注意大写！）。其他事件也是如此。注意多点触摸... Microsoft使用pointerID，以便您可以识别每个指针/鼠标/手指。这是如何工作的，在触摸事件中，eventListener始终返回event.pointerId。因此，如果您放下两根手指，MSPointerDown事件会被触发两次，并带有唯一ID。如果移动手指1，它将返回与MSPointerDown事件相同的ID，因此您可以跟踪每个点。

当然你不想要错误，所以有一种简单的方法可以检查是否支持MSPointer事件：window.navigator.msPointerEnabled。

修改

我想补充一点，就是没有e.preventDefault()。而是使用此css声明：-ms-touch-action:none;。这会将所有触摸输入路由到您的处理程序，而不是在页面上缩放/导航。

Answer 2

您想使用以下内容：

- touchstart

•动作：触摸屏幕时会触发（也会触发多点触摸）

•等效：mousedown

- touchend

•动作：手指从屏幕上抬起时会触发

•等效：mouseup

- touchmove

•动作：当一个或多个手指在屏幕上移动时触发

•等效：mousemove

- touchcancel

•操作：系统取消触摸事件时

•等效：mouseleave

Updated Fiddle

Answer 3

Chrome和Firefox有JS触摸事件，但其他人（IE，Opera）没有。

MDN touch

您必须使用其他库（如JQuery Mobile）来处理触摸。

Answer 4

您可以使用名为Hammer.js的jQuery插件，这样您就不必重新发明轮子。

它支持包括IE在内的所有主流浏览器，您可以查看完整的兼容性列表here。

使用hammer.js，您只需使用on函数绑定事件侦听器即可。示例代码看起来像这样。

Hammer(el).on("swipeleft", function() {
    alert('you swiped left!');
});

你可以在here

上看到所有eventlistener的例子

有没有办法在移动设备上使用鼠标事件作为触摸事件？

4 个答案: