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

有时候，我们希望在网页中添加一些滑动事件，以改善最终用户的体验，例如，手势翻页、幻灯片、滑条等。在前端开发中，或许我们可以找到一些事件或对应的脚本库来实现。然而，如果希望实现一个全功能型的通用滑动支持事件机制，该如何是好呢？为了理清思路，我们先约定好我们的目标，如下列表所述。

• 可以绑定到某一个 DOM 元素上。
• 支持向上、下、左、右四个方向的翻动事件定制。
• 可以设定触发上述事件的水平和垂直滑动时的最小距离。
• 任意移动操作的相关事件。

于是，我们将用 JavaScript 语言来实现这一切。

很显然，我们可以定义一下函数，需要传入待绑定的 DOM 元素，以及一个选项设置参数，用于定义行为。该方法将返回一个对象，可以用于取消相关事件的注册。

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

而关于这个选项设置参数，我们将提供如下定义支持。

• minX，可选，整数型。
  最小水平移动距离，以像素为单位。只有超出这个值，才有可能会触发向左或向右的翻动事件。
• minY，可选，整数型。
  最小垂直移动距离，以像素为单位。只有超出这个值，才有可能会触发向上或向下的翻动事件。
• turnUp(ele, y)，可选，函数，无返回值。
  向上翻动的事件定义。
  第一个参数为绑定的元素，第二个参数为向上滑动的距离。这两个参数会被自动传入。
• turnRight(ele, x)，可选，函数，无返回值。
  向右翻动的事件定义。
  第一个参数为绑定的元素，第二个参数为向右滑动的距离。这两个参数会被自动传入。
• turnDown(ele, y)，可选，函数，无返回值。
  向下翻动的事件定义。
  第一个参数为绑定的元素，第二个参数为向下滑动的距离。这两个参数会被自动传入。
• turnLeft(ele, x)，可选，函数，无返回值。
  向做翻动的事件定义。
  第一个参数为绑定的元素，第二个参数为向左滑动的距离。这两个参数会被自动传入。
• moveStart(ele)，可选，函数，无返回值。
  当滑动操作开始时会自动触发。
  其中的参数为绑定的元素。该参数会被自动传入。
• moveEnd(ele, x, y)，可选，函数，无返回值。
  当滑动操作结束时会自动触发。
  第一个参数为绑定的元素，第二个参数为水平滑动的距离，第三个参数为垂直滑动的距离。这三个参数会被自动传入。
• moving(ele, x, y)，可选，函数，无返回值。
  当正在滑动时会自动触发。可用于放入滑动操作过程中的视觉变化效果。
  第一个参数为绑定的元素，第二个参数为水平滑动的距离，第三个参数为垂直滑动的距离。这三个参数会被自动传入。

有了这些定义，我们便可以开始实现了。我们将之前写的那个方法进行修改，在方法体内的最前面，加入以下校验机制，以判断传入的参数是否不为空。然后，获取需要绑定的 DOM 元素。

if (!options || !element)
    return {
        dispose: function () { }
    };
 
var ele = !!element && typeof element === "string" ? document.getElementById(element) : element;
if (!ele) return {
    dispose: function () { }
};

接下来，我们便要分别实现对触控手势和鼠标拖拽的支持了。

【未完待续】

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

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

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