web开发，click,touch,tap事件浅析

【web开发，click,touch,tap事件浅析】的更多相关文章

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

一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分别代表单次点击和双次点击. 二.关于tap的点透处理在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件. 处理方式: (1). github上有一个叫做fastclick的库,它也能规避移动设备上clic…

web开发，click,touch,tap事件浅析

一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分别代表单次点击和双次点击. 二.关于tap的点透处理在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件. 处理方式: (1). github上有一个叫做fastclick的库,它也能规避移动设备上clic…

移动端web开发，click touch tap区别

转自: http://blog.csdn.net/sly94/article/details/51701188 移动端用tap时会有穿透问题一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件.singleTap 和doubleTap分别代表单次点击和双次点击二:tap的穿透处理使用zepto框架的tap的点击事件,来规避click事件的延迟响应,会出现穿透,即点击会触发非当前…

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

zepto.js和mui一起使用的时候,因为都有tap事件绑定tab事件后会多次触发还会报错,这时不引用zepto中的touch.js就可以了,只用mui的tap相关事件. $(function () { //mui初始化配置,设置需要的事件为true就可使用了 mui.init({ gestureConfig: { tap: true, //默认为true doubletap: true, //默认为false longtap: true, //默认为false //swipe: true,…

iOS开发中didSelectRowAtIndexPath tap事件响应延迟

为UITableViewCell添加tapped事件,代码如下: class VideoViewController: UIViewController , UITableViewDataSource,UITableViewDelegate { //... func tableView(tableView: UITableView, didDeselectRowAtIndexPath indexPath: NSIndexPath) { // 播放框背景图片 let imageName : Str…

移动端click时间、touch事件、tap事件

一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分别代表单次点击和双次点击. 二.关于tap的点透处理在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件. 处理方式: (1). github上有一个叫做fastclick的库,它也能规避移动设备上clic…

移动端click时间、touch事件、tap事件详解

一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分别代表单次点击和双次点击. 二.关于tap的点透处理在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件. 处理方式: (1). github上有一个叫做fastclick的库,它也能规避移动设备上clic…

Touch事件在移动端web开发中的详解

一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟键盘.所以以前的pc端事件在移动端使用起来就没有以前那么爽了,虽然部分仍然可以使用. click事件的300ms延迟问题. 2007年第一代iphone发布,由于那个年代所有的网页都是针对大屏的pc端设计的,iphone的Safari浏览器为了让用户浏览网页的时候…

javascript移动设备Web开发中对touch事件的封装实例

在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. ta…

彻底理解和解决移动WEB开发中CLICK点透问题

在移动WEB开发中,有时候可能会出现点透问题,本文将围绕这个TAP点透问题,详细的讲述到底什么是点透,为什么会出现点透,如何避免出现点透,如果不可避免的出现了,如何解决解决移动WEB开发中CLICK点透问题,本文讲的问题只有使用移动端的浏览器才可以发现和解决问题,因为PC的浏览器不知从touch事件.什么是click点透以下情况,在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C. 彻底理解和解决移动WEB开发中CLICK点透问题在“移动端”,点击事件通常采用touch相关事件来获取…

移动端touch、click、tap的区别

一.click 与tap比较 click与tap都会出发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap(轻击)代替click作为点击事件.singleTap 和 doubleTap分别代表单击和双击. 二.使用tap会出现点透事件(事件穿透) 很多用过Zepto(移动端开发的库)都说使用tap会出现点透事件. 1.什么是tap事件穿透执行完上层绑定的tap事件后,下层如果绑定着click事件或者本身就存在点击事件(a/input)也会默认触发,这就是点透事…

移动web开发，12个触摸及多点触摸事件常用Js插件

如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台.与桌面开发不同的是,在移动领域中,不同的操作系统.大量不同屏幕尺寸的移动设备.触摸手势操作等,这都给开发者带来了一定的难度和挑战. 虽然一些触摸事件,自己写起来也比较简单,但为了尽量不重复的造轮子,提高开发效率.这里收集整理了一些常用的手势事件脚本插件来供你参考. QUO JS 支持事件:Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right,…

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

移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser…

移动端web开发浅析

1. viewport ① viewport在移动端承载网页的区域:具有默认格式 ②设置viewport属性,适配移动端设备主流设置: <meta name = ”viewport” content = ”width = device-width , initial-scale = 1.0 , user-scalable = 0”> 主流设置快捷键:meta: vp tab键 name = ”viewport” viewport 设置入口格式 width = device-width…

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

之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms延迟:另外我们也知道zepto的touch模块,帮助我们实现了很多手机上的事件,比如tap等,tap事件也是为了解决在click的延迟问题.那么他们有什么区别呢? 先看zepto的touch模块实现: $(document) .on('touchstart ...',function(e){ ...…

移动web开发之touch事件

前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件.因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用.随着Android 中的WebKit的加入,很多这样的专有事件变成了事实标准,导致W3C开始制定Touch Events规范.本文将详细介绍移动端touch事件概述包含iOS 2.0软件的iPhone 3G发布时,也包含了一个新版本的Safari浏览器.这款新的移动Safari提供了一些与触摸(touc…

移动端click延迟和tap事件

一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击放大的功能,以确保用户可以方便地放大网页内容,但是当用户单击按钮的时候,移动设备需要延迟约300ms执行,以判断用户是否是要双击. 2.验证下面通过js代码来直观地验证click等事件的延迟 <div class="result">点我试试</div> var s…

10行代码搞定移动web端自定义tap事件

发发牢骚移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过,各有优劣,都不能一步到位.最后实在是被逼无奈,翻阅了不少资料,自定义了一个tap. 效果预览废话不多说先上效果移动端预览一探真假真的只有10行插件是基于jQuery的,上代码. //自定义tap $(document).on("touchstart", function(e) {…

移动端tap或touch类型事件的点透问题认识

1.什么是点透? 举例说明:下图B元素是黄色方块,B元素中包含了C元素,C元素是一个a链接,本身自带click事件按,然后又一个半透明的粉色元素A遮盖在B元素上(看图中A元素是覆盖在B元素上的,不然B元素区域应该是正黄色,现在是橙黄色,证明B上面被A覆盖着): 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na…

zepto学习（一）之click事件和tap事件比较

一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap分别代表单次点击和双次点击. $("div").tap(function(){ ...... }) 或者 $("div").on('tap',function(){ ......... })…

移动端触屏click点击事件延迟问题，以及tap的解决方案

在移动端触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常明显,用我的iphone5执行下段测试代码,平均延迟在370毫秒!结果非常惊人,所以在移动端必须得用tap事件了,click不仅仅是慢的问题,而且会严重影响css3动画!没错,这绝对是真的,我做的单页应用,用click事件执行的,点击后css3切换动画,经常会出现动画被省略掉直接到最后一个keyfr…

WEB开发模式浅析

WEB技术随着互联网的崛起而崛起,又随着移动互联网的发展而呈现更加多样化的趋势. 黑暗时代:大约在2005年以前,所谓的WEB开发主要还是美工的活,HTML/CSS占主导,Dreamwaver做为页面设计三剑客之一,成为大多数WEB程序员的必备利器.Javascript能不用就不用,能少用就少用,浏览器只考虑IE.那时候的Javascript显得非常异类.原型继承.语法灵活多变.调试困难(还记得在IE中调试Javascript的痛苦经历吗?),一般程序员都不愿意干前端的活.好不容易出来一个Bin…