移动端click、touch和tap之间的区别

移动端touch、click、tap的区别

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

移动端click延迟和tap事件

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

移动端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事件的延迟响应,会出现穿透,即点击会触发非当前

移动端WEB开发，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

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

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

移动端为何不使用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

移动端前端常见的触摸相关事件touch、tap、swipe等整理

前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gesture手势事件(目前只是一个概念,使用的时候需封装模拟) 使用到的是移动端的Chrome浏览器,本文只对该浏览器进行调试,其他浏览器暂未考虑到一.事件定义及分类 1. click事件单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟 2. t

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

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

移动端前端常见的触摸相关事件touch、tap、swipe

前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gesture手势事件(目前只是一个概念,使用的时候需封装模拟) 使用到的是移动端的Chrome浏览器,本文只对该浏览器进行调试,其他浏览器暂未考虑到一.事件定义及分类 1. click事件单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟 2. t

移动端的touch click事件的理解+点透

移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel . 其中touchcancel一般情况下不会触发,也不是这里讨论的焦点: 这里会结合click对上面的事件进行讨论, touch发生在click之前先上段代码,直观感受一下 <!DOCTYPE html&g

移动端click事件300ms延迟

移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果.在移动WEB兴起的初期,用户对300ms的延迟感觉不明显.但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受. 那么,移动端300ms的点击延迟是怎么来的呢? 产生原因移动浏览器上支持的双击缩放操作,以及IOS Sa

移动端click事件延迟300ms到底是怎么回事，该如何解决？

不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题. 这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因.双击缩

移动端click时间延迟300

解决移动端click延迟事件方法,,引入fastclick.js 然后在script标签里面写上FastClick.attach(document.body); <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>众筹影集</title> <meta name="viewport" c

h5开发app,移动端 click 事件响应缓慢的解决方案

造成点击缓慢的原因从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用js框架fastclick, 处理移动端 click 事件 300 毫秒延迟, 由 FT Labs 开发,Github 项目地址:https://github.com/ftlabs/fastclick 使用方法: 环境内有jquery的情况下,使用方法:

移动端click点透bug

移动端click点透bug click点透bug有一个特定的产生情况: 当上层元素是tap事件,且tap后消失,下层元素是click事件.这个时候,tap上层元素的时候就会触发下层元素的click事件 click点透以下情况,在B元素上有半透明灰色色遮盖层C,黄色B元素内有可点击链接A 解决方法上下层都是tap事件,缺点:a标签等元素本身就是自带的click事件,更改为tap比较困难缓动动画,让上层元素消失的时候不要瞬间消失,而是以动画的形式消失,事件超过300ms就可以了使用中间层,添

「移动端」touch事件，touchEvent对象

随着智能手机普及,有越来越多的手机网页和网页版游戏,手机触摸.移动.旋转等等,多种操作.一般电脑的人机交互靠的是鼠标,而手机用的就是触摸.区别有: PC 端一个电脑只能有一个鼠标,而移动端有多点触摸. PC 端添加效果使用 mouseup.mousedown.mousemove,而移动端使用的 touchstart.touchmove.touchend . 一.touch事件类型 touchstart - 手指触摸屏幕,在元素上按下时触发 touchmove - 手指移动,在元素上按下之后屏幕上

移动端click事件

var tap = "ontouchstart" in document.documentElement ? "touchend" : "click"; $("#inputClose").live("tap", function(){ $("#search").val(''); })

vue.js 添加 fastclick的支持处理移动端click事件300毫秒延迟

fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. import FastClick from 'fastclick' if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClic

fastclick：处理移动端click事件300毫秒延迟

fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera Mobile 11.5及以上版本 Android 2以来的Android浏览器 PlayBook OS 1及以上版本 2.不应用FastClick的场景桌面浏览器; 如果视口元标签中设置了width=device-width,Android上的Chrome 32+会禁用300ms延时; <met

【翻译自mos文章】Oracle GoldenGate 怎么在源头的传输进程和目的端的server/collector进程之间分配 port？

Oracle GoldenGate 怎么在源头的传输进程和目的端的server/collector进程之间分配 port? 来源于: How Does GoldenGate Allocates Ports between Source Extract Pump and Target Server/Collector? (文档 ID 965270.1) 适用于: Oracle GoldenGate - Version 9.5.0.0 and later Information in this do

移动端click、touch和tap之间的区别

热门专题