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. python 基础学习小记

    Python应该是写起来最舒服的动态语言了,一下是一些读书笔记,本文中安装的是3.0,有几点需要注意: print "xxx" 要换成 print("xxx") ...

  2. SQL 数据库基本知识

    SQL:Structured Quety Language SQL SERVER是一个以客户/服务器(c/s)模式访问.使用Transact-SQL语言的关系型数据库管理子系统(RDBMS) DBMS ...

  3. 使用express.js框架一步步实现基本应用以及构建可扩展的web应用

    最近过年在家有点懈怠,但是自己也不断在学习新的前端技术,在家琢磨了express.js的web框架. 框架的作用就是提高开发效率,快速产出结果.即使不使用框架,我们也会在开发过程中逐渐形成构成框架. ...

  4. 一个想法(续五):IT联盟创业计划:现阶段进度公示、疑问解答及进行中的计划

    前言: 首先今天是元宵节,先祝大伙元宵节快,单纯的快乐! 然后看看开展中的计划: IT联盟创业计划众筹发起:一个想法(续三):一份IT技术联盟创业计划书,开启众筹创业征程 IT联盟创业计划众筹进度:一 ...

  5. webForm系列 前端框架快速引用

    Html的确定就是不能重用,MVC可以在_Layout.cshtml中将每个页面都需要的js和css文件(如jq,bootstrap等)都引用进去,webform就麻烦一点. webForm需要给所以 ...

  6. HDU 4256 The Famous Clock

    The Famous Clock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  7. Unity渲染优化中文翻译(三)——GPU的优化策略

    如果游戏的渲染瓶颈来自于GPU 首要任务就是找出造成GPU瓶颈的因素所在,通常GPU的性能受到像素分辨率的影响,特别是在移动客户端的游戏,但是内存带宽和顶点计算的影响也需要注意.这些因素的影响都需要实 ...

  8. 安装grub

    安装windows后,grub不见了 先安装Neo进入Linux 两条命令搞定. 在root用户下输入: update-grub grub-install /dev/sda

  9. getchar()不停止原因

    应该是你的输入流中还有残留的字符,getchar()()会接受那个字符.你可以在调用getchar()()之前用fflush(stdin)刷新一下输入缓冲区. 上面一段里面,应该有读入语句吧,没读干净 ...

  10. BZOJ 3404: [Usaco2009 Open]Cow Digit Game又见数字游戏(博弈论)

    一开始被题意坑了= =,题目是说这个数字的最大和最小,不是个位的最大和最小= = 不知道怎么做只能递推了,必胜态就是存在能到达必败态的,必败态就是只能到达必胜态的 CODE: #include< ...