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

除了触控手势支持，鼠标拖拽自然也不能少。

针对鼠标拖拽的支持，我们还需要做一些准备工作。我们需要有一套方案来获得当前鼠标的位置，具体方案如下。

1. 先看看事件参数中是否包含了当前鼠标所处的坐标。如果有，那么好极了，我们直接用；否则继续下一步操作。
2. 获取当前页面滚动的位置，以及鼠标相对于页面可视区域的位置，然后相加。

另外，作为一个与本文主题无关的改进，你也可以增加获得触控时的位置，可通过获取事件参数来获得。

最终代码如下，我们将其封装成一个函数。

/**
  * Gets the position of the mouse in document.
  */
function getMousePosition() {
    // Resolve mouse position.
    var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
    var y = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
 
    // Resolve touch position.
    var evTouches = event.touches;
    if (!!evTouches && !!evTouches.length && evTouches.length > 0 && !!evTouches[0]) {
        if (isNaN(x) || x == null)
            x = evTouches[0].pageX;
        if (isNaN(y) || y == null)
            y = evTouches[0].pageX;
    } else {
        evTouches = event.changedTouches;
        if (!!evTouches && !!evTouches.length && evTouches.length > 0 && !!evTouches[0]) {
            if (isNaN(x) || x == null)
                x = evTouches[0].pageX;
            if (isNaN(y) || y == null)
                y = evTouches[0].pageX;
        }
    }
 
    // Return result as a coordinate.
    return { x: x, y: y };
}

好了，让我们回到一开始写的添加滑动事件的函数。

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

我们需要继续实现鼠标拖拽支持。

首先，还是让我们了解一下浏览器对鼠标拖拽的事件响应机制。

1. 触发一个鼠标按下事件。
2. 触发一系列的鼠标移动事件。
3. 触发一个鼠标按键松开事件。

这整个流程会在最终用户按住鼠标直至松开时所触发的。因此，我们可以了解到，一切都是基于鼠标按下开始。所以，我们要实现的功能都在这里面。当然，这其中也包括，在按下鼠标按键时，要先记录下当前鼠标所在位置。

var mouseDown = function (ev) {
    var mStartP = getMousePosition();
 
    // ToDo: Implement it.
};
ele.addEventListener("mousedown", mouseDown, false);

在获取位置后，我们要注册鼠标移动时的事件了。

var mouseMove = function (ev) {
    var mCurP = getMousePosition();
    var x = mCurP.x - mStartP.x;
    var y = mCurP.y - mStartP.y;
    options.moving(ele, x, y);
};
document.body.addEventListener("mousemove", mouseMove, false);

在松开鼠标按键时，我们需要调用滑动结束和翻动的方法。同时，我们还需要注销这两个鼠标移动和鼠标按键松开的事件；否则，松开鼠标按键后依然还会触发这些事件，这就不是我们期待的了。为了能够实现这一点，我们需要一个事件列表，然后实现一个方法去执行这个列表，在执行前，把所有事件都放进去，包括注销。

var mouseUpHandlers = [];
var mouseUp = function (ev) {
    mouseUpHandlers.forEach(function (h, hi, ha) {
        h(ev);
    });
};
mouseUpHandlers.push(
    function () {
        document.body.removeEventListener("mousemove", mouseMove, false);
    },
    function () {
        document.body.removeEventListener("mouseup", mouseUp, false);
    },
    function (ev) {
        var mCurP = getMousePosition();
        var x = mCurP.x - mStartP.x;
        var y = mCurP.y - mStartP.y;
        moved(x, y);
    }
);
document.body.addEventListener("mouseup", mouseUp, false);

鼠标的拖拽也完成了，我们接下来还要完成注销滑动事件的功能。

【未完待续】

文章类型及复杂度：Web 前端开发进阶。

节选翻译自 MSDN 博文 Slide on web，内容有所调整。

http://blogs.msdn.com/b/kingcean/archive/2016/03/23/slide-on-web.aspx