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事件的更多相关文章

  1. zepto之tap事件点透问题分析及解决方案

    点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...

  2. zepto的tap事件的穿透分析

    首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取 ...

  3. zepto+mui开发中的tap事件重复执行

    zepto.js和mui一起使用的时候,因为都有tap事件绑定tab事件后会多次触发还会报错,这时不引用zepto中的touch.js就可以了,只用mui的tap相关事件. $(function () ...

  4. fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

    之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...

  5. zepto的tap事件的点透问题的几种解决方案

    你可能碰到过在页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后,这个按钮正下方的内容也会执行点击事件(或打开链接).这个被定义为这是一个“点透”现象. 以前,我也听到过tap的点 ...

  6. webpack学习笔记——项目引入zepto及tap事件失效的解决

    先要npm下来zepto:npm install zepto 然后npm下来exports-loader和script-loader 配置如下: JavaScript // webpack.confi ...

  7. 手机端 zepto tap事件穿透

    什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...

  8. 移动端WEB开发,click,touch,tap事件浅析

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  9. 移动端为何不使用click而模拟tap事件及解决方案

    移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...

随机推荐

  1. [转载] ping和telnet的区别

    转载自:http://www.cnblogs.com/Jtianlin/p/4045021.html windown7下打开telnet功能: 控制面板 --- > 程序(小图标下直接到[程序和 ...

  2. js原生轮播图

    轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...

  3. 在QT中引用Shark Machine Learning library

    最近因为项目需要,看了看机器学习方面的东西.Google一番,发现Shark正是朕需要的东西.于是准备按官方文档来使用它了.但是官方文档只有怎么生成静态库,并没有在QT里引用的sample. 废话不多 ...

  4. Python自然语言处理学习笔记之性别识别

    从今天起开始写自然语言处理的实践用法,今天学了文本分类,并没用什么创新的东西,只是把学到的知识点复习一下 性别识别(根据给定的名字确定性别) 第一步是创建一个特征提取函数(feature extrac ...

  5. Mrc.EOF

    Mrc 是我们定义的一个变量,用来存放数据等同于 ADODB.Recordset而eof 是mrc也就是recordset的一个属性. 通常我们在程序中编写代码来检验BOF与EOF属性,从而得知目前指 ...

  6. .Net程序员学用Oracle系列(16):访问数据库(ODP.NET)

    1..Net for Oracle 常见数据库驱动 1.1.微软提供的驱动 1.2.甲骨文提供的驱动 1.3.其它厂商提供的驱动 2.ODP.NET 常见问题分析 2.1.参数化问题 2.2.方法调用 ...

  7. Laravel / Lumen 框架修改 创建时间 和 更新时间 对应字段

    为避免浪费时间--先上解决方案 在Model中重写 CREATED_AT 和 UPDATED_AT 两个类常量就可以了,这两个常量分别是创建时间和更新时间的字段名. ================= ...

  8. !important的理解

    !important用于将当前css代码优先级提升为最高,这个优先级比行内样式更高 但是!important在ie6这种垃圾浏览器下会出现小bug .testClass{ color:blue !im ...

  9. Android apk应用程序签名

    Android apk应用程序签名 分类: Android 2012-11-25 19:33 570人阅读 评论(0) 收藏 举报 一.Android Apk签名 Apk签名首先要有一个keystor ...

  10. devexpress控件layoutview特效之一旋转木马的实现

    1.devexpress有很多很好的特效,最近做了个旋转木马的特效,给大家分享下.效果图如下: 2.这里的控件为gridcontrol,里面的view为layoutview.数据绑定的代码与其他gri ...