vue移动端

touch的开始事件是@touchstart,

移动过程是@touchmove,

结束事件是@touchend

解决办法一:

elem.addEventListener(
'touchstart',
fn,
{ passive: false }
);

解决办法二:

* { touch-action: pan-y; }
使用全局样式样式去掉

Passive event listeners

2016年Google I/O上提出的概念,目的是用来提升页面滑动的流畅度。

For instance, in Chrome for Android 80% of the touch events that block scrolling never actually prevent it. 10% of these events add more than 100ms of delay to the start of scrolling, and a catastrophic delay of at least 500ms occurs in 1% of scrolls.

在 Android 版 Chrome 浏览器的 touch 事件监听器的页面中,80% 的页面都不会调用 preventDefault 函数来阻止事件的默认行为。在滑动流畅度上,有 10% 的页面增加至少 100ms 的延迟,1% 的页面甚至增加 500ms 以上的延迟。

由于浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault(),它需要等到事件处理函数执行完后,才能去执行默认行为,然而事件处理函数执行是要耗时的,这样一来就会导致页面卡顿,也就是说,当浏览器等待执行事件的默认行为时,大部分情况是白等了。

如果 Web 开发者能够提前告诉浏览器:“我不调用 preventDefault 函数来阻止事件事件行为”,那么浏览器就能快速生成事件,从而提升页面性能,Passive event listeners 的提出就解决了这样的问题。

移动端Web界面滚动touch事件的更多相关文章

  1. 73.移动端Web界面滚动性能优化 Passive event listeners

    题,滚动时候不仅滚动了希望滚动的部分,整体的页面也跟随者上下滚动,整个页面非常卡顿. 这两个页面都用了touch事件 控制台打印如下警告: [Intervention] Unable to preve ...

  2. 移动端web页面滚动不流畅,卡顿闪烁解决方案

    移动端web页面滚动不流畅,卡顿闪烁解决方案   1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...

  3. 移动web开发之touch事件

    前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件.因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用.随着An ...

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

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

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

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

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

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

  7. 基于vue的移动端web音乐播放器

    声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...

  8. React-Native系列Android——Touch事件原理及状态效果

    Native原生相比于Hybrid或H5最大长处是具有流畅和复杂的交互效果,触摸事件便是当中重要一项,包括点击(Click).长按(LongClick).手势(gesture)等. 以最简单常见的点击 ...

  9. 从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. Python单元测试框架 unittest详解

    一 整体结构概览 unittest原名为PyUnit,是由java的JUnit衍生而来.对于单元测试,需要设置预先条件,对比预期结果和实际结果. TestCase :通过继承TestCase类,我们可 ...

  2. 机器学习算法总结(十二)——流形学习(Manifold Learning)

    1.什么是流形 流形学习的观点:认为我们所能观察到的数据实际上是由一个低维流行映射到高维空间的.由于数据内部特征的限制,一些高维中的数据会产生维度上的冗余,实际上这些数据只要比较低的维度就能唯一的表示 ...

  3. 转://Oracle数据库补丁分析实践

    小弟我最近做了几次补丁分析,最开始分析补丁,感觉挺痛苦的,因为补丁数量多,且涉及的知识点非常非常的广,客户的要求又非常高.挺伤不起的.不过随着分析的深入,我慢慢的掌握了一些小方法.也在support网 ...

  4. NodeJS的优缺点

    我们知道NodeJS是2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好,解 ...

  5. Python:Day54 ORM

    Django项目中使用mysql DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'books', # ...

  6. WiFi-ESP8266入门http(3-3)网页认证上网-post请求-ESP8266程序

    第一版 原型系统 连上西电的网 直接发送上网的认证信息 返回认证结果网页 成功上网 #include <ESP8266WiFi.h> #define Use_Serial Serial s ...

  7. 在linux中查看进程占用的端口号

    在Linux 上的 /etc/services 文件可以查看到更多关于保留端口的信息. 可以使用以下六种方法查看端口信息. ss:可以用于转储套接字统计信息. netstat:可以显示打开的套接字列表 ...

  8. Spring Security(二):一、Preface(前言)

    Spring Security is a powerful and highly customizable authentication and access-control framework. I ...

  9. Spring Boot配置文件详解-ConfigurationProperties和Value优缺点-(转)好文

    文章转自 http://www.cnblogs.com/itdragon/p/8686554.html Spring Boot提供了两种常用的配置文件,分别是properties文件和yml文件.他们 ...

  10. Postman的Tests标签测试

    接口测试最重要的就是返回数据的检查,一个简单的接口,我们可以肉眼检查返回数据,但接口一旦多起来且复杂,每次的检查都会很费劲,此时我们就需要postman 的tests模块来代替 postman面板: ...