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在简单的情况下可以使用,但是在既有点击又有手势的界面会出问题,特此更改。