Question

我需要一个js代码来检测未针对手机浏览器定义的触摸事件例如，从左到右拖动手指或反转
有什么想法或诀窍吗？
如果你不使用jQuery，我将非常高兴。如果可能的话谢谢

Answer 1

使用触摸事件本身非常简单。但是，识别手势将需要自定义代码。

向窗口添加触摸事件的简单示例：

window.addEventListener("touchstart", touchStart, false)
window.addEventListener("touchmove", touchMove, false)
window.addEventListener("touchend", touchEnd, false)
window.addEventListener("touchcancel", touchCancel, false)
window.addEventListener("touchleave", touchLeave, false)

//  these functions will run when the events are triggered:
function touchStart(e)
{
    var x = e.touches[0].pageX
    var y = e.touches[0].pageY
    //  do more stuff...
}
function touchEnd(e)
{
    //  ...
}
//  etc. ...

识别一个非常简单的水平滑动可能看起来像这样：

//  (don't forget the event listeners)

var xStart, yStart

function touchStart(e)
{
    xStart = e.touches[0].pageX
    yStart = e.touches[0].pageY
}
function touchEnd(e)
{
    var xEnd = e.touches[0].pageX, yEnd = e.touches[0].pageY // store the pageX and pageY in variables for readability

    if(Math.abs(yStart - yEnd) < 100) // if there was not a lot of vertical movement
    {
        if(xEnd - xStart > 200) // at least 200 pixels horizontal swipe (to the right)
        {
            swipeLeftToRight() // swipe recognized
        }
        else if(xEnd - xStart < -200) // at least -200 pixels of horizontal swipe (to the left)
        {
            swipeRightToLeft() // swipe recognized
        }
    }
}
function swipeLeftToRight()
{
    alert("You swiped from the left to the right!")
}
function swipeRightToLeft()
{
    alert("You swiped from the right to the left!")
}

请记住，这个非常简单的示例并没有考虑用户的手指在起点和终点之间做了什么。因此，在这种情况下，功能将被触发，使用的是直线穿过，或者例如画了半个圆圈。任何更复杂或更准确的手势识别都应该在整个拖动过程中跟踪手指（touchmove）。

检测特殊的javascript触摸事件

1 个答案: