jquery 没有设置移动端的触摸(tap)事件, 这里以插件的形式另外拓展了 tap 事件,一个关键的步骤 layUI.prototype=JQuery .prototype; 将JQuery .prototype赋值给新的layUI.prototype,之后有layUI 来调取 jquery的方法,这里tap方法的指向仅限于layUI这个新对象,并不会改变jquery原型里面的东西。需要注意的是,可能需要在header添加meta
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5,user-scalable=no" />
这里依然可以采用其他的方式来,fastclick ,jqueryModle ,zepo或者其他来解决问题。
(function(window,$){
var layUI = layUI||{};
function layUI(selecter){
return $(selecter);//拷贝 query的方法以及对象
}
layUI.prototype=$.prototype; //将 jquery的prototype赋值给新对象
layUI.prototype.on = function (type, Fn) {//对原方法进行修改
if(type=='tap'){ //判断点击事件的类型 符合目标函数 进入通道 添加监听事件
var tapStartTime = 0,
tapEndTime = 0,
tapTime = 500, //tap等待时间,在此事件下松开可触发方法
tapStartClientX = 0,
tapStartClientY = 0,
tapEndClientX = 0,
tapEndClientY = 0,
tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消(根据chrome浏览器默认的判断取消点击的移动量)
cancleClick = false;
this[0].addEventListener('touchstart', function() {
tapStartTime = event.timeStamp;
var touch = event.changedTouches[0];
tapStartClientX = touch.clientX;
tapStartClientY = touch.clientY;
cancleClick = false;
})
this[0].addEventListener('touchmove', function() {
var touch = event.changedTouches[0];
tapEndClientX = touch.clientX;
tapEndClientY = touch.clientY;
if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
cancleClick = true;
}
})
this[0].addEventListener('touchend', function() {
tapEndTime = event.timeStamp;
if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
Fn();
}
})
}
};
if (typeof module !== 'undefined' && typeof exports === 'object' && define.cmd) {
module.exports = layUI;
} else if (typeof define === 'function' && define.amd) {
define(function () {
return layUI;
});
} else {
window.layUI = layUI;
}
})(window,jQuery);
网友评论