|
1. touch 事件的来历
2007 苹果推出iphone，浏览器网页在iphone上显示时字体特别小，根本看不清楚 苹果的解决方案： 方案一：双指进行缩放 方案二：在屏幕上双击进行放大（单击300ms后，再单击才算双击），造成了，移动端点击事件，300ms 延迟的问题 解决方案，就是使用touch事件来替代 移动端新增touch事件 --- 只能使用现代事件进行添加 touchstart: 触摸开始 touchmove: 触摸移动 touchend: 触摸结束 touchcancel：touch 取消，如来电等 【扩展】：移动端touch、click、tap的区别 http://t.zoukankan.com/luo1240465012-p-9450627.html 2. 添加touch 事件 代码如下： <script type="text/javascript">
document.addEventListener('touchstart', function () {
console.log( 'touchstart' );
, false);
document.addEventListener( 'touchmove ', function () {
console.log( 'touchmove' );
}, false);
document.addEventListener( 'touchend ', function () {
console.log ( 'touchend ' );
}, false);
document.addEventListener( 'touchcancel', function () {
console.log( 'touchcancel');
, false);
setTimeout(function () {
alert( 'blocked ' ); //使用alert 来模拟touchcancel 打断
, 3000);
</script>
3. touch对象 注：touchstart 触摸开始后，不管touchmove , touchend 是否移出开始触摸的元素，e.target都是开始时触摸的元素dom. <script type="text/javascript">
document.addEventListener( 'touchstart', function (e) {
console.log(e.target);
, false);
document.addEventListener( 'touchmove', function (e){
console.log(e.target);
, false);
document.addEventListener( 'touchend ' , function (e){
console.log(e.target);
, false);
</ script>
e.touches : 在手机上的所有触点信息 e.changeTouches: 跟当前事件相关的所有触点信息 e.targetTouches：作用在当前元素上的所有触点信息 【扩展】touch事件中的touches、targetTouches和changedTouches详解 https://www.cnblogs.com/mengff/p/6005516.html 4. 封装 touch 事件 <script type="text/javascript">
; (function (doc){
var Touch = function (selector) {
return Touch.prototype.init(selector);
}
Touch.prototype = {
init: function (selector) {
if (typeof(selector) 'string') {
this.elem = doc.querySelector(selector);
return this;
}
},
tap: function (callback){
this.elem.addEventListener( 'touchstart' , fn, false);
this.elem.addEventListener( 'touchend ' , fn, false);
var sTime,eTime;
function fn (e){
e.preventDefault();
switch (e.type){
case 'touchstart' :
sTime = new Date().getTime();
break;
case 'touchend ':
eTime = new Date( ).getTime();
if(eTime - sTime < 500){
callback.call(this,e);
}
break;
}
}
},
longtap: function (callback){
this.elem.addEventListener( 'touchstart' , fn,false);
this.elem.addEventListener( 'touchmove', fn, false);
this.elem.addEventListener( 'touchend ' , fn, false);
var t = null,
_self = this;
function fn (e){
switch (e.type){
case 'touchstart ' :
t = setTimeout( function () {
callback.call(_self, e);
},500);
break;
case 'touchmove' :
clearTimeout(t);
t = null;
break;
case 'touchend':
clearTimeout(t);
t = null;
break;
}
}
}
window.$ = window.Touch = Touch;
})(document);
</script>
事件测试： $('#box' ).tap(function (e) {
console. log(e.changedTouches[o]);
});
$('#box' ).longtap( function (e) {
console.log(e);
);
5. touch 事件的穿透 因click是在touch系列事件发生后300ms才触发的，混用click和touch肯定会导致穿透问题. 点击穿透现象的情况： 1) 蒙层问题 蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发后，蒙层消失，300ms后这个点的click事件触发。 2) 跨页面点击穿透问题 如果按钮下面恰好是一个href属性的a标签，那么页面就会发生跳转（a标签跳转默认是click事件触发的） 解决问题： 方法一：自己封装tap事件不会有穿透问题，因为阻止了默认行为 e.preventDefault(); 方法二：吃掉touch之后的click, 使用计时器，让touch后延迟350ms再隐藏蒙层 方法三：使用fastclick.js；可以直接写click事件 还有，其它方法，就不阐述了 |
|
|
公众号
