首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端项目经验 JavaScript

在这里简要整理一些JavaScript移动端项目经验,主要包括click点击事件延迟、元素高亮点击区、zeptotouch问题等。...移动端click时间300ms延迟 移动端,click点击事件会造成300ms延迟,造成这种延迟原因在于:当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。...元素点击高亮样式处理 移动端,出于用户了解是否点击成功,浏览器会在用户点击一个a标签或者Javascript定义可点击元素时,出现一个半透明灰色背景。...关于浏览器内核以及浏览器内核前缀可以查看《浏览器内核及内核前缀》 zeptotouch问题 为了处理一些touch事件,我们常会引入zepto等插件进行处理,但是会发现,swipe事件小米1等低端手机不支持...解决办法有两种,与其说解决办法倒不如说是权宜之计,一种是干脆不兼容低端手机(当前也是现实,只要这种手机市场份额当中占比很少,其实是可以忽略,就如同当前PC端兼容,基本都是做到IE8或IE9以上,

1.4K80

小知识 | 善用Mac自动化,少掉头发多喝茶

答案是肯定,现如今各种第三方工具,都可以支持一键干这干呢。那么有没有双击就可以呢?... Mac 替你执行重复任务 为自己操作添加脚本 两句话概括,就这么简单。...说一下我自己想法:很简单其实,和上述双击安装一样,也是一行脚本,adb push xxx xxx,不过你可以搭配其他工作流程一起使用,比如点击时候,弹出一个选择列表,提前预备一些文件夹,选择完成后... ios14+ 中,我们会使用很多快捷指令,就比如一键打开健康码,我常用功能如下: 但是这些功能复杂吗,除去手机灰尘喇叭清理,其实都是很简单功能,至少 ios 设备,其就是打开一个 url...说这些主要就是想,今后乃至未来,这种工具化小组件会越来越多,而这些小组件离 普通用户 也会越来越近,而善用这些小组件,可以为我们省下不少时间,作为开发者,我们完全参与其中,写一些常见组件,或者在一定程度上

99810
您找到你想要的搜索结果了吗?
是的
没有找到

10-移动端开发教程-移动端事件

PC端事件移动端兼容问题 1.1 click事件200~300ms延迟问题 由于移动端默认布局视口宽度是980像素,所以网页文字非常小,为了快速网页还原到原来大小,Safari最新引入了双击缩放功能...:用户双击手机页面的时候,浏览器会智能缩放当前页面到原始大小。 ​...touch相关事件普通其他dom事件一样使用,可以直接用addEventListener来监听和处理。...2.1 touch事件与click事件同时触发 很多情况下,触摸事件和鼠标事件会同时被触发(目的是没有对触摸设备优化代码仍然可以触摸设备正常工作)。...当用户触摸屏移动触点(手指)时候,触发这个事件

6.7K80

10-移动端开发教程-移动端事件

PC端事件移动端兼容问题 1.1 click事件200~300ms延迟问题 由于移动端默认布局视口宽度是980像素,所以网页文字非常小,为了快速网页还原到原来大小,Safari最新引入了双击缩放功能...:用户双击手机页面的时候,浏览器会智能缩放当前页面到原始大小。 ​...touch相关事件普通其他dom事件一样使用,可以直接用addEventListener来监听和处理。...2.1 touch事件与click事件同时触发 很多情况下,触摸事件和鼠标事件会同时被触发(目的是没有对触摸设备优化代码仍然可以触摸设备正常工作)。...当用户触摸屏移动触点(手指)时候,触发这个事件

6.4K70

移动端iPhone系列适配问题一些坑

图片.png 问题一:苹果手机input按钮自带渐变效果 一样代码,为啥苹果手机input按钮就自带渐变效果,搞特殊吗?怎么它显示正常?...图片.png 问题二:表单input元素获取焦点时页面被放大解决办法 原因:iPhone上点击input框会有一个动画效果,这是苹果公司默认设置,每次input获取焦点都会使页面放大,效果非常不好看...问题五:手机端 click 事件会有大约 300ms 延迟 原因:手机事件如下 touchstart –> touchmove –> touchend or touchcancel –> click...因为touch事件触发之后,浏览器要判断用户是否会做出双击屏幕操作,所以会等待300ms来判断,再做出是否触发click事件处理,所以就会有300ms延迟 解决方法:使用touch事件来代替click...坚持总结工作中遇到技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

1K20

什么是无障碍适配?

软件"有障碍"群体使用软件时,大概有以下几种“有障碍”群体,是无法像普通人一样:视障群体。他们看不清,需要更大字号。又或者完全看不到,需要语音播报内容。听障群体。他们听不清,需要更大音量。...他们无法自由移动手指来操控手机屏幕。无障碍解决方案操作系统其实无障碍适配主要工作,都是操作系统实现:针对视障群体,操作系统提供放大镜、大字号、内容播报、语音控制。...我们要做核心工作就是:开发 无障碍软件 可识别的 Web页面,障碍群体借助操作系统 无障碍软件,可以正常访问、使用我们 Web页面。...盲人使用手机是依靠「屏幕朗读」,开启该功能后,屏幕上会有一个矩形表示焦点(当前选中元素),通常:左滑右滑可向前、向后切换焦点,双击屏幕就是点击焦点。...单指双击屏幕(屏幕任何地方都行,不必点到该元素) 单指双击屏幕(屏幕任何地方都行,不必单指双击元素)触发手指位置元素onclick事件 双指触碰同一元素

3K73

JavaScript 时间消耗

你可以连接咖啡店 Wifi, 也可能连接上一个 2G 网络蜂窝热点. 因而, 开发者需要想办法减少 JavaScript 在网络传输时间....但是大多数移动设备, JS 更有可能对页面的交互性产生负面影响. parse5 当我们谈论脚本解析和编译很慢时, 上下文是很重要–我们说普通手机设备.... JavaScript 性能 一文中, 我注意到低配手机和高配手机上解析约 1M 被解压后脚本文件所用时间是不同....这突出了测试普通手机设备(如 Moto G4)重要性而不仅仅是你口袋里手机设备....可以考虑是否能减少脚本执行过程中需要完成工作量, 如果工作量很多, 就将脚本分成小块来分解工作量, 以提高页面可交互速度.

82370

Android 触摸屏交互之手势监听

前言 2020年,智能手机大行其道,相信不会还有人用着老式按键手机了吧,而智能手机最大交互就是手机屏幕,其次就是音量操作、生物识别(指纹+人脸+瞳孔)、说白了用最多手机屏幕,屏幕与用户之前进行交互...,与上面的onSingleTapUp方法不同地方在于, * 该方法只会在监听器确定了用户第一次单击后不会触发双击事件时才会被触发。...这里按下动作事件双击第一次触击。...,与上面的onSingleTapUp方法不同地方在于, * 该方法只会在监听器确定了用户第一次单击后不会触发双击事件时才会被触发。...这里按下动作事件双击第一次触击。

1.6K30

【移动端】touch事件及穿透事件

bug收集:专门解决与收集bug网站 网址:www.bugshouji.com touch 事件来历 2007 苹果推出iphone,浏览器网页iphone显示时字体特别小,根本看不清楚...苹果解决方案: 方案一:双指进行缩放 方案二:屏幕双击进行放大(单击300ms后,再单击才算双击),造成了,移动端点击事件,300ms 延迟问题 解决方案,就是使用touch事件来替代 移动端新增...e.changeTouches: 跟当前事件相关所有触点信息 e.targetTouches:作用在当前元素所有触点信息 【扩展】touch事件touches、targetTouches和changedTouches...因click是touch系列事件发生后300ms才触发,混用click和touch肯定会导致穿透问题....e.preventDefault(); 方法二:吃掉touch之后click, 使用计时器,touch后延迟350ms再隐藏蒙层 方法三:使用fastclick.js;可以直接写click事件

2K10

移动端web开发笔记

以下是历史原因: 2007年苹果发布首款iphoneIOS系统搭载safari为了将适用于PC端上大屏幕网页能比较好展示在手机端上,使用了双击缩放(double tap to zoom)方案,...比如你在手机上用浏览器打开一个PC网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕某一部分,你就能看清该部分放大后内容,再次双击后能回到原始状态...解决方案: fastclick可以解决在手机上点击事件300ms延迟 zeptotouch模块,tap事件也是为了解决click延迟问题 触摸事件响应顺序 1、ontouchstart 2、...,不过随后这个特性又被移除; iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果 iOS如果你想一个元素拥有像 Native 滚动效果,你可以这样做: .xxx { overflow...19、如何禁止保存或拷贝图像(IOS) 通常当你在手机或者pad长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想用户这么操作,那么你可以通过以下方法来禁止: img {

3.6K20

移动端点击事件延迟诞生消亡史

快速反馈对于任何 UI 实现都是至关重要。研究表明,100ms 是界面用户感到即时最大延迟。尽管如此,移动网络仍然受到一个巨大反馈问题困扰:触摸任何元素后,延迟 300 毫秒。...然而,由于这种双击缩放操作,在用户第一次单击页面元素时,浏览器并不知道用户是想做双击缩放操作还是普通单击操作。...因此,IOS Safari 浏览器首先引入了 300 毫秒延迟,用来判断用户是否会再次点击,也就是说,第一次点击延迟 300 毫秒,300 毫秒后用户没有再次点击则认定为用户进行普通单击操作,并触发单击...event​Target​.dispatch​Event 触发对应目标元素绑定 click 事件。...关于 FastClick 好处是,它非常容易使用,只需文档加载后调用 FastClick.attach() body 元素实例化: if ('addEventListener' in document

2.8K20

页面滑动流畅得飞起新特性:Passive Event Listeners

对于这种单线程渲染框架,存在两个明显问题: 1) 流水线执行方式,后面的工作必须等待前面工作执行完成才能处理,无法将相互独立工作并行处理; 2) 内核线程负责工作太多且耗时,一旦遇上内核执行耗时较长工作...由此也可知,实际用户看到页面内容,是一帧内容快照,新一帧还在处理中。 要优化第2个问题,对浏览器来说非常困难。只要输入事件要在内核线程执行逻辑,那么遇到内核线程忙,必然无法立即得到响应。...Chrome中,这类可以不经过内核线程就能快速处理输入事件为手势输入事件(滑动、捏合),手势输入事件是由用户连续普通输入事件组合产生,如连续mousewheel/touchmove事件可能会生成...浏览器只有等内核线程执行到事件监听器对应JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件默认行为,所以浏览器本身是没有办法对这种场景进行优化。...这种场景下,由于没有涉及到内核线程处理,用户输入响应会非常及时。 Chrome中,用户输入事件主要分为两大类:普通输入事件和手势输入事件

1.4K70

Excel催化剂开源第10波-VSTO开发之用户配置数据与工作薄文件一同存储

传统VBA开发中,若是用普通加载项方法,是可以存储数据xlam,若用是Com加载项方法同时是Addins程序级别的项目开发,配置文件没法保存到工作薄中,一般另外用配置文件来存放供调用。...针对以上问题,是否有一种完美的解决办法呢?既能开发xlam或AddIns程序级插件,同时又可以配置文件信息跟着用户文档走。...且此对象不止于VSTO内使用,VBA也同样有此对象可供计用。...\n" + "点击【是】保存修改内容并退出此工作薄,下次打开此工作薄时,工具插入图片双击、右键鼠标的操作仍然有效。...\n" + "单击【否】不保存修改内容退出此工作薄,且在下次打开此工作薄时,工具插入图片双击、右键鼠标的操作会失效。"

1.3K20

移动端问题收集和解决

产生原因 1、click事件移动端会有300ms延迟,因为需要检测双击事件。...移动端300ms延迟原因 2、zeptotap事件是绑定在document.body,tap事件执行(冒泡之后)之前,click事件已经被”执行”,只是被延迟了而已,所以tap事件用preventDefault...Safari浏览器input输入框 问题描述 safari下,input输入框,点击时会有一个默认小人出现,点击后会自动补充联系人信息 解决办法 只有将其隐藏 input::-webkit-contacts-auto-fill-button...解决办法 此时,input事件需要结合compositionstart和compositionend 这两个事件。...解决办法 实现过程中需要注意下面几个问题: 1、真正输入框位置计算: 首先记录无键盘时window.innerHeight,当键盘弹出后再获取当前window.innerHeight,

1.9K20

移动开发实用

(区分webkit 和 winphone) 当用户手指放在移动设备屏幕滑动会触发touch事件 以下支持webkit 描述 touchstart 当手指触碰屏幕时候发生。...以下是历史原因,来源其他人分享: 2007年苹果发布首款iphoneIOS系统搭载safari为了将适用于PC端上大屏幕网页能比较好展示在手机端上,使用了双击缩放 (double tap to...zoom)方案,比如你在手机上用浏览器打开一个PC网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速 双击屏幕某一部分,你就能看清该部分放大后内容,再次双击后能回到原始状态...原因就出在浏览器需要如何判断快速点击,当用户屏幕单击某一个元素时候,例如跳转链接, 此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...解决方案: fastclick可以解决在手机上点击事件300ms延迟 zeptotouch模块,tap事件也是为了解决click延迟问题 触摸事件响应顺序 1、ontouchstart

6.4K30

前端面试那些坑

li与li之间有看不见空白间隔是什么原因引起?有什么解决办法? 经常遇到浏览器兼容性有哪些?原因,解决方法是什么,常用hack技巧 ? 为什么要初始化CSS样式。...(自动变成display:block) 怎么Chrome支持小于12px 文字? 页面里字体变清晰,变细用CSS怎么做?...关于事件,IE与火狐事件机制有什么区别? 如何阻止冒泡? 什么是闭包(closure),为什么要用它? javascript 代码中"use strict";是什么意思 ? 使用它区别是什么?...(click 有 300ms 延迟,为了实现safari双击事件设计,浏览器要知道你是不是要双击操作。)...我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获 其他问题 原来公司工作流程是怎么样,如何与其他人协作?如何夸部门合作

2.1K60

滴滴事件反思:个人信息保护意识不够,和裸奔有何区别?

今天,我们讨论重点不是滴滴这个事件,而是滴滴踩这根个人信息安全红线问题;作为一名普通人来说,到底应该如何去保护自己隐私信息;来避免被有心企业过度索取,被坏人非法盗用。...这个服务是没有问题,但是我是非常不建议把个人照片同步到云,因为这些信息对我们来说都太隐私了,一旦上传,可能就再也抹除不掉了; 真实事件;前几天一个朋友我帮忙找本电子书,通过搜索引擎竟然搜到了一个非常隐私度盘相册目录...虽然现在绝大部分平台,注册时候都是需要绑定手机号码,但是前些年,并不一定需要手机号码;比如QQ早些年注册就不需要,现在有了微信,QQ几乎半年用不一回,每次上去,都会提醒我绑定手机号码,但我都拒绝了...果断给改成使用期间允许;后来换了工作,到现在,百度地图也没有给我标注出新公司位置,可能是可以参考数据不多吧。 7有没有用123456做密码?...你有没有设置过类似于123456这样简单密码,如果这么设置,无异于互联网上裸奔。 那你密码安全强度真的够吗? 答:怎么不够?我自己都记不住。

98320

每天10个前端小知识 【Day 6】

移动端点击有 300ms 延迟是因为移动端会有双击缩放这个操作,因此浏览器 click 之后要等待 300ms,看用户有没有下一次点击,来判断这次操作是不是双击。...click 延时问题还可能引起点击穿透问题,就是如果我们一个元素注册了 touchStart 监听事件,这个事件会将这个元素隐藏掉,我们发现当这个元素隐藏后,触发了这个元素下一个元素点击事件...(例如 V8 引擎) 事件触发线程:用来控制浏览器事件循环,注意这不归 JavaScript 引擎线程管,当事件被触发时,该线程会把事件添加到待处理队列队尾,等待 JavaScript 引擎处理。...异步 http 请求线程: XMLHttpRequest 连接后通过浏览器新开一个线程请求,将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。...单线程 JavaScript 所谓单线程,是指在 JavaScript 引擎中负责解释和执行 JavaScript 代码线程唯一,同一时间只能执行一件任务。

10310

前端工程师面试题汇总

li与li之间有看不见空白间隔是什么原因引起?有什么解决办法? 经常遇到浏览器兼容性有哪些?原因,解决方法是什么,常用hack技巧 ? 为什么要初始化CSS样式。...关于事件,IE与火狐事件机制有什么区别? 如何阻止冒泡? 什么是闭包(closure),为什么要用它? javascript 代码中”use strict”;是什么意思 ? 使用它区别是什么?...(click 有 300ms 延迟,为了实现safari双击事件设计,浏览器要知道你是不是要双击操作。)...我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获 其他问题 原来公司工作流程是怎么样,如何与其他人协作?如何夸部门合作?...B拿到箱子后,再在箱子加一把自己锁。 箱子运回A后,A取下自己锁。箱子再运到B手中时,B取下自己锁,获得药物。

2K80

记录工作中遇到各种问题(Bug,总结,记录)

第一次成功打印出来,即触发了load事件,但点击下一页后,iframe实际已经刷新了,但并不会再触发这个load事件 后来解决办法是换了种监听方法,区别主要是获取iframe对象方式变了,还不知为啥会这样...,上面只是禁用了双指缩放,还有一种缩放叫做双击缩放,而iPad下是没有双击事件,所以只能模拟 引用st一段双击事件支持 (function($){ // Determine...:当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕缩小后就看不清其中文字了。...而 Font Boosting 特性在这时会自动将其中文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容前提下,也可以人们方便阅读页面中文本。...中性能面板汇总可以看到,键盘按下和松开时候,会触发Angularkeypress和keyup事件,每个耗时几百毫秒 解决办法就是对不需要绑定数据,尽量不用Angular自建绑定,换成普通方式就好

17.9K12
领券