原生开发移动web单页面(step by step)4——tap事件与slide事件

pc端的click事件在移动端勉强能用, 在移动端的中手指离开屏幕后300ms后才会触发click事件。为了快速响应，一般都会自定义tap事件来代替原生的click事件。除了点击事件以外，移动端的手势滑动也是非常常用的，因此这里将单页面中添加这个事件的注册。与普通事件注册一样，我们类似用这样的语句来注册tap事件, 这里的tap是自定义事件。

page.attachTap(key， fn,  propation);

其中key与domList的key对应， fn表示点击触发的函数， propation代表事件的类型。

attachTap方法的源码

attachTap: (function () {
    var moving = false, touched = false;
    var obj = {};
    var tapEvent = document.createEvent("CustomEvent");
    tapEvent.initCustomEvent("tap", true, false, obj);

    var touchstart = function (ev) { 
        ev.stopPropagation();
        touched = true; 
    };

    var touchend = function (ev) {
        var touch = ev.changedTouches[0];
        ev.preventDefault();
        ev.stopPropagation();
        var target = ev.target;
        if (!moving) {
            obj.clientX = touch.clientX;
            obj.clientY = touch.clientY;
            target.dispatchEvent(tapEvent);
        }
        touched = false;
        moving = false;
    };

    var touchmove = function (ev) {
        ev.stopPropagation();
        if (touched) {
            moving = true;
        }
    };
    
    return function (key, fn, propation) {
        this.attachEvent(key, "touchstart", touchstart, propation);
        this.attachEvent(key, "touchmove", touchmove, propation);
        this.attachEvent(key, "touchend", touchend, propation);
        this.attachEvent(key, "tap", fn, propation);
        return this;
    }
})(),

这里使用了立即函数，返回的对象与函数挂在Page.prototype对象下，用这个好处，相当于形成了一个闭包，闭包内的环境下只能供里面的函数才能访问，当注册多个tap事件的时候，这里的touchstart, touchmove, touchend函数只需要初始创建一次。自定义事件的第四个参数可以给事件对象附带而外信息，这里带上了点击的坐标。可以通过event.detail.clientX和event.detail.clientY来分别获取。

注册slide事情比较复杂，需要处理开始滑动触发slidestart事件，滑动中slidemove事件，滑动结束后slideend事件，还要避免与原生滚动的发生冲突，因此加上了判断条件sldieFn，该函数为true时，不取消原生滚动，不触发事件。像下面的事件注册slide事件，这里的slidestart,slidemove, slideend事件都是自定义事件，通过下列代码注册

attachSlide: (function () {
    var defualtSlideFn = function (x, y) {
        return x == 0 || Math.abs(y) / Math.abs(x) > 1
    };
    var isScroll = undefined,
        touched = false,
        startObj = {},
        moveObj = {},
        endObj = {},
        sTime = null;

    var slideStartEvent = document.createEvent("CustomEvent");
    slideStartEvent.initCustomEvent("slidestart", true, false, startObj);

    var slideMoveEvent = document.createEvent("CustomEvent");
    slideMoveEvent.initCustomEvent("slidemove", true, false, moveObj);

    var slideEndEvent = document.createEvent("CustomEvent");
    slideEndEvent.initCustomEvent("slideend", true, false, endObj);

    var slidestart = function (ev) {
        ev.stopPropagation();
        touched = true;
        startObj.x = ev.touches[0].clientX;
        startObj.y = ev.touches[0].clientY;
        sTime = Date.now();
    };

    var slidemove = function (doSlideFn) {
        doSlideFn = doSlideFn || defualtSlideFn;
        return function (ev) {
            var target = ev.target;
            var clientX = ev.changedTouches[0].clientX, 
                clientY = ev.changedTouches[0].clientY,
                deltaX = clientX - startObj.x,
                deltaY = clientY - startObj.y;

            if (isScroll === undefined) {
                if (doSlideFn(deltaX, deltaY)) {
                    isScroll = true;
                }
                else {
                    isScroll = false;
                    target.dispatchEvent(slideStartEvent);
                    ev.preventDefault();
                    ev.stopPropagation();
                }
            }
            else if (isScroll === false) {
                ev.preventDefault();
                ev.stopPropagation();
                moveObj.deltaX = deltaX;
                moveObj.deltaY = deltaY;
                moveObj.clientX = clientX;
                moveObj.clientY = clientY;
                target.dispatchEvent(slideMoveEvent);
            }
        }
    }
    
    var slideend = function (ev) {
        var target = ev.target;
        ev.stopPropagation();
        touched = false;
        var clientX = ev.changedTouches[0].clientX, 
            clientY = ev.changedTouches[0].clientY;

        if (isScroll === false) {
            endObj.deltaX = clientX - startObj.x;
            endObj.deltaY = clientY - startObj.y;
            endObj.clientX = clientX;
            endObj.clientY = clientY;
            endObj.elapsed = Date.now() - sTime;
            target.dispatchEvent(slideEndEvent);
        }
        isScroll = undefined;
    };

    return function (key, startFn,  fn, endFn, propation, slideFn) {
        this.attachEvent(key, "touchstart", slidestart, propation);
        this.attachEvent(key, "touchmove", slidemove(slideFn), propation);
        this.attachEvent(key, "touchend", slideend, propation);
        this.attachEvent(key, "slidestart", startFn, propation);
        this.attachEvent(key, "slidemove", fn, propation);
        this.attachEvent(key, "slideend", endFn, propation);
        return this;
    }
})(),

这里的使用技巧方法与注册attachTap的类似

增加了这两个方法之后，可以修改loginPage， indexPage， registerPage的对象代码，让他们支持点击和滑动方法，代码如下：

indexPage的js代码

var indexPage = App.createPage("index", {
    getDomObj: function (dom) {
        this.attachDom(".btn-group", "btnGroup", dom)
            .attachDom(".index-container", "container", dom)
            .attachSlide("container", this.startFn, this.moveFn, this.endFn)
            .attachTap("btnGroup", this.tapHandler, false);
    },
    tapHandler: function (ev) {
        var target = ev.target;
        var action = target.dataset.action;
        switch (action) {
            case "register": 
                app.render(registerPage);
                break;
            case "login": 
                app.render(loginPage);
                break;
        }
    },
    startFn: function (ev) {},
    moveFn: function (ev) {},
    endFn: function (ev) {
        var speed = 1000 * ev.deltaX / ev.elapsed;
        if (speed > 200) {
            app.render(registerPage);
        }
        else if (speed < -200) {
            app.render(loginPage);
        }
    }
});

这里就右向左滑，跳转到loginPage页面，左向右滑，跳转到registerPage页面。

registerPage的js代码

var registerPage = App.createPage("register", {
    getDomObj: function (dom) {
        this.attachDom("[data-action='back']", "backBtn", dom)
            .attachDom(".register-form", "form", dom)
            .attachDom(".register-container", "container", dom)
            .attachSlide("container", this.startFn, this.moveFn, this.endFn)
            .attachTap("backBtn", this.tapBackHandler, false)
            .attachEvent("form", "submit", this.submitHandler, false);
    },
    tapBackHandler: function (ev) {
        app.render(indexPage);
    },
    submitHandler: function (ev) {
        ev.preventDefault();
        var form = ev.target;
        var name = form.name.value;
        var password = form.password.value;
        var agree = form.agree.checked;
        if (agree) {
            app.render(goalPage);
        }
    },
    startFn: function (ev) {},
    moveFn: function (ev) {},
    endFn: function (ev) {
        var speed = 1000 * ev.deltaX / ev.elapsed;
        if (speed > 200) {
            app.render(indexPage);
        }
    }
});

类似，左向右滑回到首页

loginPage的js代码

var loginPage = App.createPage("login", {
    getDomObj: function (dom) {
        this.attachDom("[data-action='back']", "backBtn", dom)
            .attachDom(".login-form", "form", dom)
            .attachDom(".login-container", "container", dom)
            .attachSlide("container", this.startFn, this.moveFn, this.endFn)
            .attachTap("backBtn", this.tapBackHandler, false)
            .attachEvent("form", "submit", this.formSubmitHandler, false);
    },
    tapBackHandler: function (ev) {
        app.render(indexPage);
    },
    formSubmitHandler: function (ev) {
        ev.preventDefault();
        var form = ev.target;
        var name = form.name.value;
        var password = form.password.value;
        app.render(goalPage);
    },
    startFn: function (ev) {},
    moveFn: function (ev) {},
    endFn: function (ev) {
        var speed = 1000 * ev.deltaX / ev.elapsed;
        if (speed > 200) {
            app.render(indexPage);
        }
    }
});

类似，左向右滑回到首页

在使用tap的事件的时候,请不要给表单元素的父元素注册，这样子会导致表单元素点击无效无法获取焦点等，因为tap事件处理的时候，将事件的默认行为取消了。

总结：自定义事件和原生的事件用法是一模一样的，一般自定义事件都没有默认行为，不过可以通过取消冒泡与否来阻止是否让事件向上传播，还可以通过第三个参数来改变事件的触发顺序，非常的有用。通过使用tap和slide可以大大提高单页面的操作性，这里只是小试牛刀，对于点击和滑动的时候如果能再加上一点响应，那就更完美了。这里可以通过改变dom的类来响应，当然，后面会加入动画模块，通过动画模块配合tap和slide事件来做出非常方便的功能。

后续更新：现在单页面虽然快速，但是很多地方不及多页面方便，比如多页面的按手机后退键，可以退到上一个渲染页面，前进可以前进到前面一个页面。这就好像原生app一样。下面几篇就是要实现这个功能。用这个功能需要用到history的api，然后却无法在本地浏览器使用，因此，下一篇介绍如何使用nodejs搭建一个基本本地服务器。

请用移动端设备打开该案例
案例链接

原生开发移动web单页面(step by step)1——传统页面的开发
 原生开发移动web单页面(step by step)2——Page对象
 原生开发移动web单页面(step by step)3——App对象
 原生开发移动web单页面(step by step)5——nodejs服务器的搭建
 原生开发移动web单页面(step by step)6——history api应用
 原生开发移动web单页面(step by step)7——页面切换动画
 原生开发移动web单页面(step by step)8——History对象

修改

(function () {
    var moving = false;
    var obj = {};
    var tapEvent = document.createEvent("CustomEvent");
    tapEvent.initCustomEvent("tap", true, false, obj);

    var touchstart = function (ev) { 
        ev.stopPropagation();
    };

    var touchend = function (isTarget) {
        return function (ev) {
            ev.stopPropagation();
            var target = ev.target;
            if (!moving) {
                ev.preventDefault();
                var touch = ev.changedTouches[0];
                obj.clientX = touch.clientX;
                obj.clientY = touch.clientY;
                target.dispatchEvent(tapEvent);
            }
            moving = false;
        }
    };

    var touchmove = function (ev) {
        ev.stopPropagation();
        moving = true;
    };

    var defualtSlideFn = function (ev) {
        var x = ev.detail.deltaX, y = ev.detail.deltaY;
        return x == 0 || Math.abs(y) / Math.abs(x) > 1;
    };

    var isScroll = undefined,
        startObj = {},
        moveObj = {},
        endObj = {},
        sTime = null;

    var slideStartEvent = document.createEvent("CustomEvent");
    slideStartEvent.initCustomEvent("slidestart", true, false, startObj);

    var slideMoveEvent = document.createEvent("CustomEvent");
    slideMoveEvent.initCustomEvent("slidemove", true, false, moveObj);

    var slideEndEvent = document.createEvent("CustomEvent");
    slideEndEvent.initCustomEvent("slideend", true, false, endObj);

    var slidestart = function (ev) {
        ev.stopPropagation();
        startObj.x = ev.touches[0].clientX;
        startObj.y = ev.touches[0].clientY;
        sTime = Date.now();
    };

    var slidemove = function (doSlideFn) {
        doSlideFn = doSlideFn || defualtSlideFn;
        return function (ev) {
            moving = true;
            var target = ev.target;
            var clientX = ev.changedTouches[0].clientX, 
                clientY = ev.changedTouches[0].clientY,
                deltaX = clientX - startObj.x,
                deltaY = clientY - startObj.y;

            if (isScroll === undefined) {
                if (doSlideFn.call(this, {detail: { deltaX: deltaX, deltaY: deltaY, clientX: clientX, clientY: clientY, target: target }})) {
                    isScroll = true;
                }
                else {
                    isScroll = false;
                    target.dispatchEvent(slideStartEvent);
                    ev.preventDefault();
                    ev.stopPropagation();
                }
            }
            else if (isScroll === false) {
                ev.preventDefault();
                ev.stopPropagation();
                moveObj.deltaX = deltaX;
                moveObj.deltaY = deltaY;
                moveObj.clientX = clientX;
                moveObj.clientY = clientY;
                target.dispatchEvent(slideMoveEvent);
            }
        }
    }
    
    var slideend = function (ev) {
        if (isScroll === false) {
            var target = ev.target;
            ev.stopPropagation();
            moving = false;
            var clientX = ev.changedTouches[0].clientX, 
                clientY = ev.changedTouches[0].clientY;
            
            endObj.deltaX = clientX - startObj.x;
            endObj.deltaY = clientY - startObj.y;
            endObj.clientX = clientX;
            endObj.clientY = clientY;
            endObj.elapsed = Date.now() - sTime;
            target.dispatchEvent(slideEndEvent);
        }
        isScroll = undefined;
    };

    Page.prototype.attachSlide = function (key, startFn,  fn, endFn, propation, slideFn) {
        this.attachEvent(key, "touchstart", slidestart, propation);
        this.attachEvent(key, "touchmove", slidemove(slideFn), propation);
        this.attachEvent(key, "touchend", slideend, propation);
        this.attachEvent(key, "slidestart", startFn, propation);
        this.attachEvent(key, "slidemove", fn, propation);
        this.attachEvent(key, "slideend", endFn, propation);
        return this;
    }
    
    Page.prototype.attachTap = function (key, fn, propation, isTarget) {
        this.attachEvent(key, "touchstart", touchstart, propation);
        this.attachEvent(key, "touchmove", touchmove, propation);
        this.attachEvent(key, "touchend", touchend(isTarget), propation);
        this.attachEvent(key, "tap", fn, propation);
        return this;
    }
})();

虽然上面的提到attachTap和attachSlide在简单的情况下可以使用，但是在既有点击又有手势的界面会出问题，特此更改。