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. 性能监控之Java程序执行解析

    大家好,最近接触javassist技术,研究过程中对Java程序执行过程进行了一系列探索,弄清楚了几个盲区(仅针对个人而言),现将经验与大家分享. 1.编码->.java 通常指写代码的过程,最 ...

  2. cygwin 运行窗口程序

    首先, 默认安装的cygwin是不能运行窗口程序的 比如,一段python窗口程序: import * from tkinter Tk() mainloop() 如果使用命令行: python3 py ...

  3. WebForm 控件(二)

    控件 Calendar:日历控件 但是html代码量太大不适用 FileUpdate: 文件上传 HiddenField:隐藏域 Image: 图片  可以直接给URL 不适用可用html代码写 Ta ...

  4. Madifest文件详解

    介绍 Madifest是个XML的描述文件,对于每个DLL有DLL的Manifest文件,对于每个应用程序Application也有自己的Manifest.对于应用程序而言,Manifest可以是一个 ...

  5. 蓝桥网试题 java 入门训练 序列求和

    ---------------------------------------------------------------------------------------------------- ...

  6. Codeforces 708A Letters Cyclic Shift

    A. Letters Cyclic Shift time limit per test:1 second memory limit per test:256 megabytes input:stand ...

  7. <C++Primer>第四版 阅读笔记 第三部分 “类和数据抽象”

    类定义了数据成员和函数成员:数据成员用于存储与该类类型的对象相关联的状态:而函数成员则负责执行赋予数据意义的操作. 第12章 类 一个类可以包含若干公有的.私有的和受保护的部分:在public部分定义 ...

  8. 修改本地配置远程连接oracle数据库

    当我们需要查看数据库信息时,我们更愿意通过客户端来查看,这样不仅操作方便,而且查看更精准.那么需要远程连接数据库需要在本地修改那些配置呢?以下是我个人的经验,希望大家都指正. 1.在oracle安装目 ...

  9. 使用nat方式解决虚拟机联网问题

    本文全文参考:http://jingyan.baidu.com/album/4e5b3e1957979d91901e24f1.html?picindex=1,谢谢 对于很多的linux初学者来说,最开 ...

  10. java 继承的学习(转)

    转自:http://www.cnblogs.com/happyframework/p/3332243.html,非常感谢啊 public class test { /** * @param args ...