网页元素的滑动事件（二）

最新推荐文章于 2023-11-11 11:16:29 发布

Kingcean

最新推荐文章于 2023-11-11 11:16:29 发布

阅读量484

点赞数

分类专栏：网页前端文章标签： Web JavaScript 触控 UI

网页前端专栏收录该内容

17 篇文章

订阅专栏

我们已经准备好了以下基本代码，现在要开始实现触控手势支持。

function addSlide(element, options) {
    // Validate arguments...
    // Resolve element...
 
    // ToDo: Implement it.
    return null;
}

触控包括通过使用手指、笔和其它类型的触控输入方式进行输入。添加触控手势支持，我们需要先了解浏览器对此的事件处理机制。

当开始进行触碰时，会产生一个触控开始的事件。
当触控进行中时，会由一系列连续不断的触控移动的事件被触发。
当离开触屏时，会产生一个触控结束的事件。

因此，我们将会基于这些已有的基本事件开始我们的实现。对于触碰开始事件，我们需要记录下触碰点的坐标信息。

var start = null;
var touchStart = function (ev) {
    start = {
        x: ev.targetTouches[0].pageX,
        y: ev.targetTouches[0].pageY
    };
    if (!!options.moveStart)
        options.moveStart(ele);
};
ele.addEventListener("touchstart", touchStart, false);

当触控进行中时，我们可以通过不停地计算当前触碰点的坐标与开始时所记录的值的差值，得出移动的距离，从而执行注册的方法。

var touchMove = !!options.moving
    ? function (ev) {
        var point = ev.touches ? ev.touches[0] : ev;
        if (!point) return;
        var coor = {
            x: point.pageX - start.x,
            y: point.pageY - start.y
        };
        options.moving(ele, coor.x, coor.y);
    }
    : null;
if (!!touchMove)
    ele.addEventListener("touchmove", touchMove, false);

在结束的时候，我们需要用同样方式获取最终位移了多远。与此同时，我们还要根据选项设置里的最小水平和垂直距离，已经实际操作过程中的水平与垂直平移的差值，来推算出是否触发了预定义的某个方向（上下左右中的一个）的翻动操作。

var moved = function (x, y) {
    var isX = !y || (Math.abs(x) / Math.abs(y) > (minX + 0.01) / (minY + 0.01));
    if (isX) {
        if (x > minX && !!options.turnLeft)
            options.turnLeft(ele, x);
        else if (x < -minX && !!options.turnRight)
            options.turnRight(ele, -x);
    } else {
        if (y > minY && !!options.turnUp)
            options.turnUp(ele, y);
        else if (y < -minY && !!options.turnDown)
            options.turnDown(ele, -y);
    }
 
    if (!!options.moveEnd)
        options.moveEnd(ele, x, y);
};

现在，我们将这个注册到触控结束的事件中去。

var touchEnd = function (ev) {
    if (start == null) return;
    var x = ev.changedTouches[0].pageX - start.x;
    var y = ev.changedTouches[0].pageY - start.y;
    start = null;
    moved(x, y);
};
ele.addEventListener("touchend", touchEnd, false);