mui和zepto的tap事件

Posted 2020-09-04 永往

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;});