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

移动端click事件300ms延迟

产生原因 移动浏览器上支持的双击缩放操作,以及IOS Safari 上的双击滚动操作,是导致300ms的点击延迟主要原因。...双击缩放:顾名思义,即用手指在屏幕上快速点击两次,移动端浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景。用户在 浏览器里边点击了一个链接。...由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。...该方法缺点在于必须通过完全禁用缩放来达到去掉点击延迟的目的,但我们初衷是想禁止默认双击缩放行为,这样就不用等待300ms来判断当前操作是否是双击。...这个方案相比方案一的好处在于,它没有完全禁用缩放,而只是禁用了浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面。不足在于其他浏览器的支持有限。

3K21

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

因此,IOS Safari 浏览器首先引入了 300 毫秒延迟,用来判断用户是否会再次点击,也就是说,在第一次点击延迟 300 毫秒,300 毫秒后用户没有再次点击则认定为用户在进行普通的单击操作,并触发单击...这项技术的另一个关键在于,它仅消除了双击缩放的功能,用户依然可以使用双指缩放功能。因此,不存在与禁用缩放相关的可用性和可访问性问题。...; } 甚至可以添加 touch-action: none 到 body 以完全禁用双击来缩放(注意:这也将禁用双指缩放功能,因此它与我们前面讨论的与禁用缩放相关的可访问性和可用性问题相同)。...该属性值提供了两全其美的体验;它允许双指缩放,以避免 touch-action: none 出现的可访问性和可用性问题,但它仍然可以通过禁用双击缩放来消除 300ms 的延迟。...启用平移和双指缩放手势,但禁用其他非标准手势,例如双击缩放。 禁用双击缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。

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

    BetterDisplay Pro for Mac(虚拟显示器软件)

    可以将你的显示器转换为完全可伸缩的屏幕,允许亮度控制,提供XDR/HDR升频。...帮助您为 Mac 创建和管理虚拟显示器,注意:如果双击app不能打开软件的话,可以右键BetterDisplay.app-显示包内容-Contents-MacOS-双击运行终端文件BetterDummy...BetterDisplay Pro for Mac(虚拟显示器软件)     • 将您的内部和本机连接的外部显示器转换为 Apple Silicon 上平滑缩放的 HiDPI 显示器 - 现在甚至无需镜像虚拟...(完全支持带缺口、HDR、HDCP、高刷新率的显示器)!    ...• 更好的缩放质量(系统偏好»辅助功能»缩放)或即使在 1080p 显示器上也能获得高质量的屏幕截图     • 通过菜单栏中的滑块(或子菜单)轻松更改真实和虚拟显示器的分辨率。

    3.3K20

    iOS 高德地图开发详解

    3.地图的使用 3.1配置Info.plist 文件 iOS9为了增强数据访问安全,将所有的http请求都改为了https,为了能够在iOS9中正常使用地图SDK,请在"Info.plist"中进行如下配置...二:自定义地图功能 在上面功能的基础上我们可以针对需求,自定义地图功能,下面我就列举出常用功能设置方法: 1.地图Logo 默认的Logo为蓝色字样的“高德地图”,显示在地图的左下方。...在iOS SDK中,比例尺默认显示在地图的左上角。MAMapView的showScale属性用来控制比例尺的可见性,scaleOrigin属性用来改变比例尺的显示位置。...表示禁用缩放手势,YES表示开启 //平移(滑动)手势 _mapView.scrollEnabled = NO; //NO表示禁用滑动手势,YES表示开启 //旋转手势(3D) _mapView.rotateEnabled...地图操作 地图缩放 地图的缩放级别的范围是[3-19],调用MAMapView的setZoomLevel方法设置地图的缩放级别,用来缩放地图。

    2.7K20

    300ms点击延迟

    300ms点击延迟 移动端的300ms点击延迟是因为移动端可以进行双击缩放的操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是判断这次操作是单击还是双击。...B,A元素在B元素上重叠放置,如果A元素的touchstart事件绑定的回调函数是隐藏A元素自身,那么当点击A元素后A元素会消失,事件的触发顺序是touchstart -> touchend -> click...解决方案 禁止缩放 通过完全禁止缩放来使双击缩放的功能失效,此时浏览器就可以禁用默认的双击缩放行为并且去掉300ms点击延迟,但是在这种情况下双指缩放的功能也会失效。...浏览器在包含width=device-width也就是视口宽度=设备宽度或者设置为比viewport值更小的页面上禁用双击缩放行为,没有双击缩放就没有300ms点击延迟,这种方案没有完全禁用缩放,而是禁用浏览器默认的双击缩放行为...,它允许移除特定元素或整个文档的触发延迟,而无需禁用缩放。

    1.3K20

    探究 css touch-action 属性

    See 这样的bug 然后找了一通发现可以用 *{touch-action:none}这个方法 用法是禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放行为(如地图或游戏表面...manipulation 浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势,但禁用其他非标准手势,例如双击以进行缩放。...禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”(为了兼容性本身仍然有效)的别名。...示例 最常见的用法是禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放行为(如地图或游戏表面) #map { touch-action: none; } 另一种常见的模式是使用指针事件处理水平平移的图像轮播....image-carousel { width: 100%; height: 150px; touch-action: pan-y pinch-zoom; } 触摸动作也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟

    2K10

    如何构建可伸缩的Web应用?

    为什么要构建可伸缩的Web应用? 想象一下,你的营销活动吸引了很多用户,在某个时候,应用必须同时为成千上万的用户提供服务,这么大的并发量,服务器的负载会很大,如果设计不当,系统将无法处理。...你的大多数用户将丢失,产品评级将降低,市场将充满负面评论。 所以,可伸缩性已经成为Web应用程序的DNA。 可伸缩应用架构简介 可伸缩架构的两个主要原则: 关注点分离 水平扩展 ?...关注点分离对于可伸缩的应用架构至关重要,不仅因为它能够在专用服务器之间分配不同类型的任务,而且它是水平扩展的基础。 水平缩放 水平缩放的思想是在多台服务器之间分配负载。...现在,让我们看看关注点分离和水平缩放如何协同工作。 构建可伸缩的应用 ?...CDN 称为内容交付网络,是一种缓存服务器,可以将内容立即交付给用户。 ? 假设你在 YouTube 上观看了一个有趣的视频,该视频存储在加利福尼亚的静态存储服务器中。

    92730

    【 Flutter 手势探索】我的第二本小册来了

    在一个界面中,小到一个按钮的点击、复选框的选择,大到白板绘制的控制、视口的滚动,都或多或少存在手势操作的身影。界面通过事件响应向用户提供操作的可能性。...这些操作绝大多数是由手势接触触发的,无论是单击、双击、长按、拖拽,还是双指缩放、双指旋转、滑动。其根源都是对用户触点进行响应,触发相关逻辑处理。...竖直拖拽手势:在 第 3 章 会实现可随竖直手势拖拽而伸缩的弹簧,放手时恢复原长的展示效果。是一个手势入门体验的绝佳案例。 点击相关手势:在 第 4 章 会通过一个有趣的案例介绍关于点击的事件。...变换手势 :在第 6 章 ,开始会介绍如下基于 scale 相关回调进行的 缩放 、旋转、平移 变换操作。...【3】第 11 ~ 15 章 是结合源码调试分析的手势竞技核心内容,主要分析了单击和双击两个手势检测器的工作流程,在第 13 章,通过简单的漫画场景分析了双击和单击手势检测器调试存在的竞争情况。

    1K30

    Human Interface Guidelines —— Scroll Views

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚...Scroll View Scroll View允许用户浏览大于可见区域的内容,例如文档中的文本或图像collection。 ...如果对app有用,请支持捏或双击来放大和缩小。启用缩放时,请设置合理的最大和最小比例值。例如,放大文本直到单个字符填满屏幕可能在大多数app中没有意义。...·考虑在scroll view处于分页模式时显示页面控制元素 页面控件显示有多少页面,屏幕或其他内容块是可用的,并指示哪一个当前可见。...如果显示scroll view时显示页面控件,请禁用同一轴上的scrolling indicator以避免混淆。

    1.2K80

    BubbleRob tutorial 遇到的问题

    现在,在模型基础上构建的单个对象在场景中不能再被选中了(选择它们将会选择模型的基础),但是它们仍然可以通过在选择过程中按住ctrl和shift键进行单独选择,或者在场景层次结构中选择它们。...Cannot be deleted不能删除:当启用时,对象将忽略删除操作(但删除将仍然工作时,通过代码触发)。...Collidable可碰撞:允许对选定的可碰撞对象启用或禁用碰撞检测功能。 Measurable可测量:允许启用或禁用所选可测量对象的最小距离计算能力。...Detectable可检测:允许启用或禁用所选可检测对象的接近传感器检测功能。单击details允许您编辑可检测的详细信息。...Scaling可伸缩:在V-REP中,对象或模型可以以一种灵活的方式伸缩。

    1.9K10

    【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

    iOS10 开始,为了提高网页在 Safari 中的可访问性,Safari 限制了最小倍数(minimum-scale)并忽略了 最大倍数(maximum-scale) 的声明。...5.2 自适应设计 为了在特定设备上实现最好的用户体验,越来越多的产品,开始针对特定屏幕设计固定的 UI,绝大多数移动端产品都有了区分于 PC 的专门的m站。...移动端多屏适配的需求,常见主要有两类: 1、布局伸缩式(布局伸缩,内容大小固定或梯级变化); 2、等比缩放式(布局和内容完全等比例缩放)。...如上图,布局伸缩式适配需求,常见于排版比较简单的信息流展示类业务。 其布局特点一般为横向伸缩,竖向高度固定或由内容填充决定;文字图标等网页内容一般会固定大小,且在宽屏窄屏上的视觉大小保持一致。...在滚动到视图中之前,视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口,例如当用户进行缩放缩放时。该布局视口保持不变,但视觉视口变小。

    3.4K30

    如何解决移动端Click事件300ms延迟的问题?

    这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因。...双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? ?...假定这么一个场景: 用户在 iOS Safari 里边点击了一个链接。...由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。...在页面的DOM文档加载完成后 fastClick.attach(document.body) 如果你用过FastClick在移动端,就会发现有一个体验很不好的问题,某些ios上,点击输入框想唤启软键盘,

    1.6K30

    移动端web开发笔记

    以下是历史原因: 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,...比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态...双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后...的字体,使用样式的写法为20px .css{font-size:20px} 6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置

    4K20

    Axure RP 9 中文

    Axure RP 9是可以在Mac电脑上进行交互原型设计的中文工具,优化工作设计的流程,以最佳的方式,展示自己优秀的作品,xure RP 9可以为您整理笔记,将其分配给UI元素,并合并屏幕注释,新的交互构建器已经过全面重新设计和优化...文字格式 字符间距删除线超级/下标案例转换生成“lorem ipsum”带有悬挂缩进的项目符号列表完全对齐 原型播放器 axure rp 9 mac具有触摸光标和移动滚动条的移动模式缩放选项(替换视口设置...)下一页和上一页的快捷方式自动包含Axure上的Google字体的Web字体 选色器 色轮保存的颜色径向渐变建议的颜色 形状 形状绘制工具绘图工具的单键快捷方式从草图粘贴(带插件)双击边框以编辑矢量点形状上的背景图像钢笔工具改进形状在原型中生成为...“库”窗格中库自动刷新双击.rplib以加载或编辑库 笔记 一次查看页面上的所有注释为窗口小部件分配多个注释可以取消分配和重新分配注释在注释中包括窗口小部件文本在注释中包括窗口小部件交互注释可以按层次结构组织...(1,1.1,1.1.1)注意数字显示在原型中注意数字是连续的动态面板主要注释是生成原型的 表单小部件 自定义样式样式效果(鼠标悬停,禁用等) 互动 内联交互构建器在交互构建器中搜索启用/禁用时的条件显示

    1.8K60

    View编程指南

    苹果官方文档View Programming Guide for iOS 一、简介 在iOS中,您可以使用windows和views在屏幕上显示应用程序的内容。...每个应用程序至少有一个Window,在应用程序的主屏幕上显示应用程序的用户界面。 如果外部显示器连接到设备,应用程序可以创建另一个Window来在该屏幕上显示内容。...可伸缩View 您可以指定View的一部分为可拉伸的,以便当view的大小改变时,只有可拉伸部分的内容受到影响。 您通常在按钮或其他View中使用可拉伸区域,其中部分view定义了可重复的图案。...仅当content mode会导致View的内容被缩放时才使用可伸缩区域。...可伸缩View完全在Core Animation layer中处理,通常可以提供更好的性能。

    2.6K20

    彻底搞懂移动Web开发中的viewport与跨屏适配

    iOS10 开始,为了提高网页在 Safari 中的可访问性,Safari 限制了最小倍数(minimum-scale)并忽略了 最大倍数(maximum-scale) 的声明。...5.2 自适应设计 为了在特定设备上实现最好的用户体验,越来越多的产品,开始针对特定屏幕设计固定的 UI,绝大多数移动端产品都有了区分于 PC 的专门的m站。...移动端多屏适配的需求,常见主要有两类: 1、布局伸缩式(布局伸缩,内容大小固定或梯级变化); 2、等比缩放式(布局和内容完全等比例缩放)。...如上图,布局伸缩式适配需求,常见于排版比较简单的信息流展示类业务。 其布局特点一般为横向伸缩,竖向高度固定或由内容填充决定;文字图标等网页内容一般会固定大小,且在宽屏窄屏上的视觉大小保持一致。...在滚动到视图中之前,视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口,例如当用户进行缩放缩放时。该布局视口保持不变,但视觉视口变小。

    3.8K20

    Axure RP 9 for Mac(原型设计软件)

    )下一页和上一页的快捷方式自动包含Axure上的Google字体的Web字体 选色器 色轮保存的颜色径向渐变建议的颜色 形状 形状绘制工具绘图工具的单键快捷方式从草图粘贴(带插件)双击边框以编辑矢量点形状上的背景图像钢笔工具改进形状在原型中生成为...(1,1.1,1.1.1)注意数字显示在原型中注意数字是连续的动态面板主要注释是生成原型的 表单小部件 自定义样式样式效果(鼠标悬停,禁用等) 互动 内联交互构建器在交互构建器中搜索启用/禁用时的条件显示...以你的想法的速度 从头脑风暴到完善的可交付成果,通过改进的图书馆管理,简化的自适应视图,更灵活和可重复使用的母版以及动态面板的内联编辑,更有效地工作。...在移动设备上,使用适用于iOS和Android的浏览器或Axure Share App。 DIAGRAMMING +文档 创建流程图,线框,模型,用户旅程,角色,创意板等。...更简单的团队合作 Axure RP允许多人同时处理同一文件,使您的团队更容易协同工作。在Axure Share或SVN上创建“团队项目”,并使用签入和签出系统来管理更改。

    1.8K20

    移动开发实用

    以下是历史原因,来源其他人的分享: 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放 (double tap to...zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速 双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态...双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接, 此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下, <!

    7K30

    jimojianghu

    立马联系用户,才发现原来是用户使用笔记本电脑,没有禁用触控板,然后不小心碰到导致整个界面都放大,很多功能超出界面不见了。...然而那能怎么办,用户第一,自然得快速解决这个问题,而且是触控板和触摸屏都得解决。 在以前,如果要禁止移动端设备的触摸屏上,手指缩小放大的功能,都会想到使用viewport 来处理。...用于设置触摸屏用户如何操纵元素的区域,允许你在触控时控制滚动操作。 例如,浏览器内置的缩放功能。 这样做的好处还有,它可以允许你自己实现这些手势。...启用平移和缩小缩放手势,但禁用其他非标准手势,例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。...触摸动作也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟。 pinch-zoom 启用多手指平移和缩放页面。 这可以与任何平移值组合。

    4K00
    领券