$(this).on(eventName);
});
}
});
return this;
}
})(eventName, event.htmlEvent);
}
}(window.jQuery);
网上能找到很多关于Touch事件的相关信息,所以我就不详细说明了,可以解释得简单一点。
触摸事件代替鼠标事件
在Webkit移动设备上,触摸操控首先会触发触摸事件,在0.5秒后才会触摸鼠标事件。
个人觉得这在设计上可以理解。先满足于触摸操控的需求,然后再向“下”兼容鼠标事件,以满足原有面向桌面网页的使用。
所有的事件大致执行顺序是:touchstart->touchmove->touchend->0.5s->鼠标事件mouseover/scroll/click等
按照webkit移动浏览器的设计,一般开发时候按照桌面网页开发,然后移动设备上使用是没问题的。不过桌面上大量使用的hover类效果时常会因为触摸把mouse事件+click事件触发个遍而悲剧;0.5秒的延迟也对用户体验造成了大伤害。
所以我添加了tapOrClick事件,用途就是替代click事件,并且灭了那0.5秒。
滚动锁定
在用户使用触摸设备进行滚动,而触摸已经停止的时候,浏览器会锁定整个页面,暂停所有UI资源占用,而把大部分资源留给内核进行滚动。同样的情况还会发生在放大缩小页面内容,甚至更甚。
因为要加个滚动渐变的特效,所以我添加了moveOrScroll事件,在滑动的时候执行滚动中应该执行的效果。
当然,这里还是不完美的,因为手指一旦离开屏幕(触摸事件停止),页面自由滚动的这段时间,js也会被freeze。这只是没有办法中的办法而已。
滚动锁定还会导致另一个问题就是:滚动有三种,分别是上下、左右、自由。
用一下触摸设备就会发现,如果从触摸开始被判定是上下滚动,那么触摸时再怎么左右滑动都不会有左右滑动的效果,除非放开重来。同样的情况也会发生在一开始为左右滚动。自由滚动的话需要一开始就进行斜向滚动。
在这个时候如果需要加入特定事件的话,需要注意事件的判断。在jQuery的事件回调参数中,假设参数名为e,那么一般用:










