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

来源：互联网发布：淘宝上的众筹是真的吗编辑：程序博客网时间：2024/06/17 13:08

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

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

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

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

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

/**  * 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;}

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

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

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

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

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);

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