移动端touchstart和click

移动端touch与click区别--移动端开发整理笔记（五）

移动端用touch还是click? 在移动端开发中,click事件有300ms的延时,由来源于iphone处理双击缩放功能种下的坑.因为用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例.为了区分用户的操作是双击还是单击,就增加了300ms的延时等待!随着touch端界面的发展,用户体验的提高使得300ms让人难以忍受. touch事件存在的问题: 某些场景下存在点击穿透的问题.(在移动端,手指点击一个元素,会经过:touchstart --> touchmo

移动端的传统click事件延迟和点透现象

一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重叠的部分,就会出现点透的现象. 二.点透现象的分析在移动端不使用click而用touch事件代替触摸是因为click事件有着300ms的延迟,事件触发的顺序: touchstart--touchmove--touchend--click touchstart:在这个DOM(或冒泡到这个DOM)上手

移动端tap与click的区别 && 点透事件

移动端的问题移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有click,就会进行放大缩小. 但是,问题是大部分时候放大.缩小时不需要的,有时开发者也会禁用他们,那么300ms的延迟就是性能上的损耗的,所以,如何解决这300ms的延迟? 在移动端,最容易想到的就是使用touchend来替代click,但是touchend是存在很大的问题的,因为touchend之

关于"touchstart与click同时触发"问题

点击事件可以分解成多个事件: 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --> click 由于移动设备能够同时识别 touchstart 和 click 事件,因此当用户点击目标元素时,绑定在目标元素上的 touchstart 事件与 click 事件(约300ms后)会依次被触发,也就是说,我们所绑定的回调函数会被执行两次! 解决方案方法一:使用事件对象中的 preventDefault 方法 preventDe

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

移动端touchstart事件穿透问题，解决方案

[来源]:在开发移动端网站时,会经常徘徊在click和touchstart之间:因为touchstart虽然好用和快速响应:但是其缺点也是显而易见的,当我们大面积的使用touchstart的时候就会遇到,滚动页面的时候会频繁的触发,导致其不友好的体验:所以,不能单独的说哪个好与不好,而应该利用其长处,规避其缺点: 而且,对于a标签,在移动端的跳转方式,等同于click(经过自己实际体验) [问题]在我们在上层触发touchstart的时候,下层的click或者a标签都会同时被触发(严格的讲是35

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

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

触屏touchstart 与 click

设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸屏幕向下滑动时,menuList弹框不消失,只有手指点击menuList之外的部分才消失. 查看代码发现,源代码只定义了click事件: $(doc.body).on('click',function(e) { if (e.target.id != 'menu') headerMenu.hide(); }); 说明触屏版对click和to

移动端touchstart、touchmove事件的基本使用

在pc端,我们通常使用$(window).scroll()事件来监听元素的位置,来做一些入场动效,如: $(window).scroll(function(){ var panel3Move = document.getElementById('panel3').offsetTop <= ($(window).scrollTop() + 656); panel3Move && move('.panel1-man .man2').set('opacity', '1').duration

触摸屏touchstart 与 click

设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题.当menuList弹出.手指触摸屏幕向下滑动时,menuList弹框不消失.仅仅有手指点击menuList之外的部分才消失. 查看代码发现,源码仅仅定义了click事件: $(doc.body).on('click',function(e) { if (e.target.id != 'menu') headerMenu.hide(); }); 说明触屏版对click和t

手机设备上touchstart与click的区别

1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短因此,click事件有其独特的地方,不能完全用touchstart替代. 2.click延时问题因为手机浏览器上,两次轻触是放大操作,在第一次被轻触后,浏览器需要先等一段时间,检测是否有第二次连续触碰,才会触发click时间,click时间通常会延迟300ms左右. 解决方法:在touchstart和touchend时

移动端touchstart,touchmove,touchend

近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成app也毫无压力.原本以为touch事件应该跟鼠标事件是一样的道理,实践过程中虽然不难,但还是碰到了不少坑,才发现还是略有区别的. $(document).bind(touchEvents.touchstart, function (event) { event.preventDefault();

开发移动端web页面click事件失效问题

这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的preventDefault导致click失效? 于是,换成了touchSart事件试了下,效果比之前略好,但是,有重复点击事件,本小白排查了一会儿, 发现页面上明明在滚动区域有别的点击事件,为毛别的用的好好的,就这个不行,仔细对比,发现别的都是A标签, 无效的是DIV,于是,我就像发现了新大陆一样,麻

touchstart和click 自动区分

var clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) return 'touchstart'; else return 'click';})();

移动端ios中click点击失效

原因: Safari应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件. 所以,需要在点击的元素上加上{cursor:pointer},就解决了.当然还有别的方法,检点来说就这样解决了. 测试了下,上面的方法没有成功: 后来参考了这里 http://www.cnblogs.com/hity-tt/p/6423591.html 我的做法是取消了on的事件委托: 并且,参考这里: http://www.mamicode.com/info-detail-1503869.htm

移动端页面去掉click点击背景色变化

a,input,em,h2{-webkit-tap-highlight-color:rgba(255,0,0,0);}给点击元素加上样式 :-webkit-tap-highlight-color:rgba(255,0,0,0);

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发. 之后百度了一下这个问题,原因是主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发. 为了解决开发者需要,建议开发者在touchstart时调用event.preventDe

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

如何解决 touchstart 事件与 click 事件的冲突

一 · 业务场景的描述在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 click 事件. 为什么这样效果会更好呢?根据Google开发者文档中的描述: 移动设备上的浏览器将会在 click 事件触发时延迟 300ms ,以确保这是一个“单击”事件而非“双击”事件. 而对于 touchstart 事件而言,则会在用户手指触碰屏幕的一瞬间触发所绑定的事件.所以

巴特西