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事件的更多相关文章
- zepto之tap事件点透问题分析及解决方案
点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...
- zepto的tap事件的穿透分析
首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取 ...
- zepto+mui开发中的tap事件重复执行
zepto.js和mui一起使用的时候,因为都有tap事件绑定tab事件后会多次触发还会报错,这时不引用zepto中的touch.js就可以了,只用mui的tap相关事件. $(function () ...
- fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...
- zepto的tap事件的点透问题的几种解决方案
你可能碰到过在页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后,这个按钮正下方的内容也会执行点击事件(或打开链接).这个被定义为这是一个“点透”现象. 以前,我也听到过tap的点 ...
- webpack学习笔记——项目引入zepto及tap事件失效的解决
先要npm下来zepto:npm install zepto 然后npm下来exports-loader和script-loader 配置如下: JavaScript // webpack.confi ...
- 手机端 zepto tap事件穿透
什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...
- 移动端WEB开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
随机推荐
- C# MongoDB 查询,分组,聚合,排序,条件,分页
先下载个C#的驱动.MongoDB提供各种主流与非主流预言的开发驱动. C# Driver 下载地址:这里 CSharp Driver Tutorial:这里 下载文件安装或者解压缩包 如果您是安装, ...
- ROM、RAM、DRAM、SRAM和FLASH的区别
ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是Random Access Memory的缩写.ROM在系统停止供电的时候仍然可以保持数据,而RAM通常都是 ...
- js 全选/取消
平时常用一个小功能 var check_all = document.getElementsByName('student_box'); var check_flag = true; function ...
- 理解Node.js(译文)
前言 总括 :这篇文章十分生动形象的的介绍了Node,满足了读者想去了解Node的需求.作者是Node的第一批贡献者之一,德国前端大神.译者觉得作者的比喻很适合初学者理解Node,特此翻译. 译者 : ...
- 如何在linux下制作一个windows的可启动u盘?
如何在linux下制作一个windows的可启动u盘? 情景是这样的,有一个windows10的iso,现在想通过U盘安装,要求即支持UEFI(启动引导器),又支持Legacy(启动引导器),因为有一 ...
- Vue.js的环境搭建
vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里 ...
- Raspberry树莓派学习笔记2—配置RobotFramework自动化测试环境
一般RobotFramework都是安装在Windows/Linux的PC机上,这里将简单介绍在树莓派硬件平台上配置RobotFramework的开发和运行环境. 树莓派上配置了自动化测试软件,可以考 ...
- 《C++ Primer》学习笔记 :命名空间的using声明
最近在学C++,在<C++ Primer>第五版的3.1节中说到使用using声明来使用命名空间中的成员,<C++ Primer>中这样写道: 有了using声明就无须专门的前 ...
- B/S架构与C/S架构的区别
C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势. ...
- 简单说说NoHTTP
学习NoHttp的原因是由于公司之前做的产品使用的网络请求框架一直都是Volley(为什么使用Volley就不用多说了,最起码是谷歌开发团队自己搞的,总感觉权威一些),可是自从android6.0推出 ...