首页 > 代码库 > mui和zepto的tap事件
mui和zepto的tap事件
zepto.js和mui一起使用的时候,tap事件会发生两次,这时只要不引用zepto.js的touch.js就可以了,只用mui的tap事件
转自【B5教程网】:http://www.bcty365.com/content-146-5131-1.html
1.zepto.js和mui一起使用的时候,tap事件会发生两次,这时只要不引用zepto.js的touch.js就可以了,只用mui的tap事件,如:
mui(".infor_header").on(‘tap‘,‘li‘,function(){
alert(123);
})
或
$(".box")[0].addEventListener("tap",function(){
alert(456);
})
2.mui使用的时候会将所有的a标签的href屏蔽,所以需要引入一段js,如下:
mui.init();
window.onload=function(){
var els=$("a");
for(var i=0;i<els.length;i++){
els[i].addEventListener(‘tap‘,function(){
openCustURL(this.getAttribute(‘href‘));
})
}
}
function openCustURL(vurl){
mui.openWindow({
url:vurl,
show:{
autoShow:true,
aniShow:‘slide-in-right‘,
duration:400
},
waiting:{
autoShow:false,
title:‘正在加载...‘
}
})
}
转自【B5教程网】:http://www.bcty365.com/content-146-5131-1.html
3.把zepto.js的touch api 去掉 就好了,像如下注释掉
//;(function($){ //var touch = {}, touchTimeout // //function parentIfText(node){ // return ‘tagName‘ in node ? node : node.parentNode //} // //function swipeDirection(x1, x2, y1, y2){ // var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2) // return xDelta >= yDelta ? (x1 - x2 > 0 ? ‘Left‘ : ‘Right‘) : (y1 - y2 > 0 ? ‘Up‘ : ‘Down‘) //} // //var longTapDelay = 750, longTapTimeout // //function longTap(){ // longTapTimeout = null // if (touch.last) { // touch.el.trigger(‘longTap‘) // touch = {} // } //} // //function cancelLongTap(){ // if (longTapTimeout) clearTimeout(longTapTimeout) // longTapTimeout = null //} // //$(document).ready(function(){ // var now, delta // // $(document.body).bind(‘touchstart‘, function(e){ // now = Date.now() // delta = now - (touch.last || now) // touch.el = $(parentIfText(e.touches[0].target)) // touchTimeout && clearTimeout(touchTimeout) // touch.x1 = e.touches[0].pageX // touch.y1 = e.touches[0].pageY // if (delta > 0 && delta <= 250) touch.isDoubleTap = true // touch.last = now // longTapTimeout = setTimeout(longTap, longTapDelay) // }).bind(‘touchmove‘, function(e){ // cancelLongTap() // touch.x2 = e.touches[0].pageX // touch.y2 = e.touches[0].pageY // }).bind(‘touchend‘, function(e){ // cancelLongTap() // // // double tap (tapped twice within 250ms) // if (touch.isDoubleTap) { // touch.el.trigger(‘doubleTap‘) // touch = {} // // // swipe // } else if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) || // (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) { // touch.el.trigger(‘swipe‘) && // touch.el.trigger(‘swipe‘ + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2))) // touch = {} // // // normal tap // } else if (‘last‘ in touch) { // touch.el.trigger(‘tap‘) // // touchTimeout = setTimeout(function(){ // touchTimeout = null // touch.el.trigger(‘singleTap‘) // touch = {} // }, 250) // } // }).bind(‘touchcancel‘, function(){ // if (touchTimeout) clearTimeout(touchTimeout) // if (longTapTimeout) clearTimeout(longTapTimeout) // longTapTimeout = touchTimeout = null // touch = {} // }) //}) // //;[‘swipe‘, ‘swipeLeft‘, ‘swipeRight‘, ‘swipeUp‘, ‘swipeDown‘, ‘doubleTap‘, ‘tap‘, ‘singleTap‘, ‘longTap‘].forEach(function(m){ // $.fn[m] = function(callback){ return this.bind(m, callback) } //}) //})(Zepto)
4.//解决 所有a标签 导航不能跳转页面
mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;});
mui和zepto的tap事件