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

Ionic 4- click与touchstart在平板电脑上的对比(点击/移动配置存在问题)

Ionic 4是一个流行的跨平台移动应用开发框架,它基于Web技术栈(HTML、CSS和JavaScript)构建应用程序。在Ionic 4中,click和touchstart是两种常用的事件,用于处理用户在移动设备上的点击和触摸操作。然而,在平板电脑上,这两种事件可能存在一些配置问题。

click事件是在用户点击屏幕时触发的,它适用于大多数情况下的点击操作。它具有简单易用的特点,但在某些情况下可能会有300毫秒的延迟。这是因为浏览器需要等待一段时间,以确定用户是否正在进行双击操作。为了解决这个延迟问题,可以使用Ionic提供的tap事件,它是对click事件的封装,可以实现更快的响应速度。

touchstart事件是在用户触摸屏幕时触发的,它适用于需要更精确控制的操作,例如滑动、拖拽等。与click事件相比,touchstart事件具有更低的延迟和更高的灵敏度。然而,在平板电脑上,由于屏幕尺寸较大,用户可能会意外触发touchstart事件,导致意外的操作。为了解决这个问题,可以通过适当的配置来限制touchstart事件的触发区域或添加其他手势识别逻辑。

综上所述,对于Ionic 4应用程序在平板电脑上的点击和触摸操作,可以根据具体需求选择使用click事件或touchstart事件。对于一般的点击操作,建议使用click事件或Ionic提供的tap事件,以获得更好的兼容性和用户体验。对于需要更精确控制的操作,可以使用touchstart事件,并根据实际情况进行适当的配置和手势识别。

腾讯云提供了一系列与移动应用开发相关的产品和服务,例如移动应用开发平台、移动推送、移动测试等。您可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多相关信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

什么是移动端开发【重点学习系列—干货十足–一万字详解】

屏幕分辨率显示分辨率不同。计算机可以修改显示分辨率,信号传递给屏幕,屏幕会进行计算,屏幕显示。...苹果曾经给出个一个标准:手机屏幕达到 300PPI、平板屏幕达到 220PPI、笔记本电脑屏幕达到 200PPI 即可认为是 Retina 屏幕。...viewport-fit 设置为 cover 可以解决『刘海屏』留白问题 4-移动端事件 事件类型 移动端事件列表 touchstart 元素触摸开始时触发 touchmove 元素触摸移动时触发...touchstart 事件作用在于实现移动界面交互 事件绑定 方式一 方式二 点击穿透 touch 事件结束后会默认触发元素 click 事件,如没有设置完美视口,则事件触发时间间隔为...如果 touch 事件隐藏了元素,则 click 动作将作用到新元素,触发新元素 click 事件或页面跳转,此现象称为点击穿透 解决方法 阻止当前元素事件默认行为。

2.5K21

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

PC端事件移动兼容问题 1.1 click事件200~300ms延迟问题 由于移动端默认布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来大小,Safari最新引入了双击缩放功能...2.1 touch事件click事件同时触发 很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有对触摸设备优化代码仍然可以触摸设备正常工作)。...因为双击缩放检测存在移动设备屏幕上点击操作事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault...封装移动端tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动点击事件, 以下是封装几个事件,仅供参考。...移动点击穿透问题 如果某个返回按钮位置,恰好在要返回这个页面的带有href属性a标签范围内,点击返回按钮后,页面快速切换到有a标签页面,300ms后触发了click事件,从而触发了a标签意外跳转

6.8K80
  • 吃透移动端 H5 Hybrid|实践踩坑12种问题汇总

    (经常更新该文) 移动端 H5 相关问题汇总: 1px 问题 响应式布局 iOS 滑动不流畅 iOS 拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透延迟 软键盘弹出将页面顶起来...原理解决方案 解决方案一:使用 touchstart 替换 click 前面已经介绍了,移动设备不仅支持点击,还支持几个触摸事件。那么我们现在基本思路就是用 touch 事件代替click 事件。...将 click 替换成 touchstart 不仅解决了 click 事件都延时问题,还解决了穿透问题。因为穿透问题 touch 和 click 混用时产生。...我们想象一种情景,同时需要点击和滑动场景下。如果将 click 替换成 touchstart 会怎样?...很容易想象,我需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,具有滚动情况下,还是建议使用 click 处理。

    2.1K20

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

    PC端事件移动兼容问题 1.1 click事件200~300ms延迟问题 由于移动端默认布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来大小,Safari最新引入了双击缩放功能...2.1 touch事件click事件同时触发 很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有对触摸设备优化代码仍然可以触摸设备正常工作)。...因为双击缩放检测存在移动设备屏幕上点击操作事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault...封装移动端tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动点击事件, 以下是封装几个事件,仅供参考。...移动点击穿透问题 如果某个返回按钮位置,恰好在要返回这个页面的带有href属性a标签范围内,点击返回按钮后,页面快速切换到有a标签页面,300ms后触发了click事件,从而触发了a标签意外跳转

    6.4K70

    移动端必备H5问题及解决方案

    移动端 H5 相关问题汇总: 响应式布局 iOS 滑动不流畅 iOS 拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透延迟 软键盘弹出将页面顶起来、收起未回落问题 iPhone...原理解决方案 解决方案一:使用 touchstart 替换 click 前面已经介绍了,移动设备不仅支持点击,还支持几个触摸事件。那么我们现在基本思路就是用 touch 事件代替click 事件。...将 click 替换成 touchstart 不仅解决了 click 事件都延时问题,还解决了穿透问题。因为穿透问题 touch 和 click 混用时产生。...我们想象一种情景,同时需要点击和滑动场景下。如果将 click 替换成 touchstart 会怎样?...很容易想象,我需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,具有滚动情况下,还是建议使用 click 处理。

    4.5K42

    移动端事件穿透原理解决方案

    目前市面上主流移动设备一般都使用触摸屏,触摸屏所使用触摸事件模型传统网页鼠标事件模型有所区别,这种差异往往使初涉移动开发工程师陷入困境,事件穿透问题便是其中一个,本文将带你了解事件穿透及如何在实际项目中选择合适方案解决事件穿透问题...很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有对触摸设备优化代码仍然可以触摸设备正常工作)。...事件穿透不就是由于 touch click 事件存在触发时间差造成吗,全部都使用 click 事件就不会有问题。然而事实真的如此美好?...解决点击事件延迟问题可以使用以下 CSS 代码实现: html { touch-action: manipulation; } 这样已经很完美了。然而,什么是工作?工作就是不停解决问题。...实际项目开发中,纯移动端项目优先推荐禁用 click 事件方法,多端项目优先推荐禁用 touch 事件方法。

    1.4K20

    吃透移动端 H5 Hybrid|实践踩坑12种问题汇总

    (经常更新该文) 移动端 H5 相关问题汇总: 1px 问题 响应式布局 iOS 滑动不流畅 iOS 拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透延迟 软键盘弹出将页面顶起来...原理解决方案 解决方案一:使用 touchstart 替换 click 前面已经介绍了,移动设备不仅支持点击,还支持几个触摸事件。那么我们现在基本思路就是用 touch 事件代替click 事件。...将 click 替换成 touchstart 不仅解决了 click 事件都延时问题,还解决了穿透问题。因为穿透问题 touch 和 click 混用时产生。...我们想象一种情景,同时需要点击和滑动场景下。如果将 click 替换成 touchstart 会怎样?...很容易想象,我需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,具有滚动情况下,还是建议使用 click 处理。

    1.3K30

    【Hybrid】518- 12种移动端 H5 Hybrid问题汇总

    (经常更新该文) 移动端 H5 相关问题汇总: 1px 问题 响应式布局 iOS 滑动不流畅 iOS 拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透延迟 软键盘弹出将页面顶起来...原理解决方案 解决方案一:使用 touchstart 替换 click 前面已经介绍了,移动设备不仅支持点击,还支持几个触摸事件。那么我们现在基本思路就是用 touch 事件代替click 事件。...将 click 替换成 touchstart 不仅解决了 click 事件都延时问题,还解决了穿透问题。因为穿透问题 touch 和 click 混用时产生。...我们想象一种情景,同时需要点击和滑动场景下。如果将 click 替换成 touchstart 会怎样?...很容易想象,我需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,具有滚动情况下,还是建议使用 click 处理。

    1.4K22

    12个关于移动 H5 开发采坑问题汇总

    (经常更新该文) 移动端 H5 相关问题汇总: 1px 问题 响应式布局 iOS 滑动不流畅 iOS 拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透延迟 软键盘弹出将页面顶起来...原理解决方案 解决方案一:使用 touchstart 替换 click 前面已经介绍了,移动设备不仅支持点击,还支持几个触摸事件。那么我们现在基本思路就是用 touch 事件代替click 事件。...将 click 替换成 touchstart 不仅解决了 click 事件都延时问题,还解决了穿透问题。因为穿透问题 touch 和 click 混用时产生。...我们想象一种情景,同时需要点击和滑动场景下。如果将 click 替换成 touchstart会怎样? 事件触发顺序: touchstart, touchmove, touchend, click。...很容易想象,我需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,具有滚动情况下,还是建议使用 click 处理。

    1.7K20

    移动click事件300ms延迟

    移动click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器派发点击事件时候,通常会出现300ms左右延迟。...预备知识:移动点击一个元素触发事件顺序 以下是四种touch和click事件 touchstart: //手指放到屏幕时触发 touchmove: //手指在屏幕滑动式触发...:移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --》click。...zepto自定义tap操作虽然可以解决300ms点击延迟问题,但存在著名“点透”问题。不知其最新版本有没有解决该问题。 fastclick 解决300ms延迟。...tap事件:能较好解决点击延迟,并且对其他移动端触摸事件也有较好支持,但存在点透问题,不知最新版是否解决。 fastclick:当前较好专门解决点击延迟库,脚本尺寸相对较大。

    2.8K21

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

    bug收集:专门解决收集bug网站 网址:www.bugshouji.com touch 事件来历 2007 苹果推出iphone,浏览器网页iphone显示时字体特别小,根本看不清楚...苹果解决方案: 方案一:双指进行缩放 方案二:屏幕双击进行放大(单击300ms后,再单击才算双击),造成了,移动点击事件,300ms 延迟问题 解决方案,就是使用touch事件来替代 移动端新增...因clicktouch系列事件发生后300ms才触发,混用click和touch肯定会导致穿透问题....点击穿透现象情况: 1) 蒙层问题 蒙层关闭按钮绑定是touch事件,而按钮下面元素绑定click事件,touch事件触发后,蒙层消失,300ms后这个点click事件触发。...2) 跨页面点击穿透问题 如果按钮下面恰好是一个href属性a标签,那么页面就会发生跳转(a标签跳转默认是click事件触发) 解决问题: 方法一:自己封装tap事件不会有穿透问题,因为阻止了默认行为

    2K10

    Vue移动端 Web App 点击穿透问题解决方案

    描述 近期一个移动端项目中,有一个页面需要有弹框提示,并且这个弹框通过关闭按钮关闭。...页面当中使用了 iScroll 来实现页面局部滚动, iScroll 配置当中把 tap 和 click 事件都开启了。...$refs.wrapper, { mouseWheel: true, click: true, tap: true }) 实现过程中,遇到了一个奇怪问题,由于按钮位置弹框右上角关闭按钮位置一致...B元素A元素之上。我们B元素touchstart事件注册了一个回调函数,该回调函数作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。...通过上网查找有关资料,翻阅了移动书籍,发现在手机端中,事件触发顺序为:touchstart -> touchmove -> touchend,而 click 事件有 300ms 延迟,当 touchstart

    1.7K30

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

    之后继续百度,得知当在移动端上点击屏幕时,会依次触发touchstart,touchmove,touchend,click事件。...如果在点击屏幕时候手指滑动的话,是不会触发click事件。...之后我大胆推测了一下: 会不会是因为移动click事件触发条件就是必须touchstart和touchend同时触发才能触发click呢?...之后我删除了touchstartevent.preventDefault方法,果然超链接和click事件都触发了,但是前面说问题又出现了,QQ和微信中touchmove和touchend又出问题了...x轴和y轴移动值,判断当前是往哪个方向滑动,如果是x轴滑动(左右),就调用event.preventDefault()方法,如果是y轴滑动(上下),就不调用event.preventDefault

    3.3K20

    移动端web开发,click touch tap区别

    移动端用tap时会有穿透问题 一:clicktap比较 clicktap都会触发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap代替click作为点击事件。...三:穿透原因 问题HTML5点击了q以后,弹出b弹框 因为tap事件是通过document绑定了touchstart和touchend事件实现,$('.q'),当touchend事件冒泡到document...以后执行$(this).hide();此时$('.b'),就处在了页面的最前面 现在touchend冒泡到了document,并且$('.b')页面的最前面,然后就触发了click事件 四:解决穿透问题...1.github上有一个叫做fastclick库,它能规避移动设备click事件延迟响应https://github.com/ftlabs/fastclick将它用script标签引入页面(该库支持...也可以不在body初始化它,而在某个dom初始化,这样,只有设个dom和它子元素才能享受"无延迟"点击 实践开发中,当元素绑定fastclick后,click响应速度比tap还要快一点。

    2.3K100

    移动点击穿透问题解决

    移动点击穿透原理 当同时绑定 touchstart、touchend、click 三个事件时候,触发先后顺序是:touchstart -> touchend -> click。...正是由于这种 click 事件滞后性设计从而会产生事件穿透(点击穿透)问题。...移动click 事件点击会有 300ms 延迟问题,但是 touchstart  touchend 不会延迟,当这几个事件同时绑定时候,则会导致三个事件回调函数执行逻辑无法同时进行,从而产生了...实际项目开发中,纯移动端项目优先推荐禁用 click 事件方法,多端项目优先推荐禁用 touch 事件方法。...300ms延迟,想想都慢 不用touch就不会存在touch之后300ms触发click问题,如果交互性要求不高可以这么做, 强烈不推荐 ,快一点总是好 3、拿个东西来挡住 比较笨方法,不推荐用

    1.1K20

    移动click延迟及zepto穿透现象 转

    移动click事件300ms延迟现象原因: 最早iphonesafar浏览器中,为了实现触屏中双击放大效果,当用户点击屏幕时后会判断300ms内是否有第二次点击,如果有,就理解成双击,若没有就是单击...当你点击移动设备屏幕时, 可以分解成多个事件,顺序依次为:touchstart — touchmove — touchend — click, 这些事件是按顺序依次触发....解决延迟思路: touchstart touchend是没有延迟,可以touchend时触发用户想要在click时触发事件. zepto 解决click延迟原理: 自定义tap事件,当用户点击元素时...,touchend事件先发生, 当touchend事件冒泡到document时触发目标元素绑定tap事件 简单模拟zepto tap实现方式(这里忽略touchstarttouchend点击位置判断...): // document元素绑定touchend事件, touchend事件处理函数中自定义tap事件, 当点击目标元素touchend事件冒泡到document时, 触发绑定在目标元素

    1.3K10

    300ms点击延迟

    300ms点击延迟 移动300ms点击延迟是因为移动端可以进行双击缩放操作,因此浏览器click之后要等待300ms,看用户有没有下一次点击,也就是判断这次操作是单击还是双击。...如果通过监听touchstart事件来替代click事件的话,会导致一些问题touchstart是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart事件;当页面上有两个元素A和...B,A元素B元素重叠放置,如果A元素touchstart事件绑定回调函数是隐藏A元素自身,那么当点击A元素后A元素会消失,事件触发顺序是touchstart -> touchend -> click...,如果在300ms内没有第二次点击便会触发click事件,此时由于A元素消失,那么click事件便落到了B元素,如果B元素是个链接或者绑定了click事件,那么B元素默认行为或者是绑定事件回调便会意外地触发...,这就是点击穿透问题,解决这个问题还是需要解决click事件300ms延迟问题

    1.2K20

    目前比较火前端框架及UI组件

    5.JQuery Mobile 地址:点击打开链接 (中文网) 描述:Query Mobile是jQuery 在手机上和平板设备版本。...jQuery Mobile 适用于所有流行智能手机和平板电脑。 jquery Mobile 使用 HTML5 和 CSS3 通过尽可能少脚本对页面进行布局。...从技术讲, Vue.js 集中 MVVM 模式视图模型层,并通过双向数据绑定连接视图和模型。实际 DOM 操作和输出格式被抽象出来成指令和过滤器。...10.Ionic 地址:点击打开链接 描述:Ionic既是一个CSS框架也是一个Javascript UI库。...一个很好例子就是标签栏(Tab Bar)视图控制器处理点击标签栏一系列可视化面板间切换。 浏览我们API文档来了解视图控制器和Ionic中可用Javascript实用工具。

    4.9K40

    JS篇(028)-移动click 事件、touch 事件、tap 事件区别

    参考答案: 1.click 事件移动端会有 200-300ms 延迟,主要原因是苹果手机设计时,考虑到用户浏览网页时需要放大,所以,在用户点击 200-300ms 之后,才触发 click,...mouseover mouseup 触发 3.tap 事件移动端,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生,所以是封装...delayTime = 200, // 记录是否移动,如果移动,则不触发tap事件 isMove = false; // touchstart...如果我们移动端所有的 click 都替换为了 tap 事件,还是会触发点透问题,因为实质是: 同一个 z 轴,z-index 不同两个元素,上面的元素是一个绑定了 tap 事件,下面是一个...已经消失了,所以,触发了下面的 a click 事件,注意: 我们认为 a 标签默认是绑定了 click 事件

    6.4K40

    05移动端事件

    ('touchstart', function(){}); 二、PC端事件移动端(出现问题)      1、PC端事件移动端略慢,大概300ms左右      2、阻止PC事件 document.addEventListener...('touchstart', function(ev){ ev.preventDefault(); }); 作用问题:                1、移动点透     问题:当上层元素发生点击时...('touchstart', function(){ //这边click 改为 touchstart alert(111); });                2、解决IOS10...事件对象:用户浏览器下触发某个行为,事件对象会记录用户操作时相关细节(如位置信息等))      1、touches:当前位于 屏幕(包括dom元素之外) 所有手指列表      2、targetTouches...:位于当前 DOM 元素(当前dom元素之外无法获取)手指列表      3、changedTouches:涉及当前事件手指一个列表      例子:移动端无缝轮播切换

    1.3K50
    领券