tap

在触屏设备中,例如手机或平板,一些浏览器实现了,在用户停止点击屏幕,以及同时浏览器执行点击之间300毫秒的延迟。该延迟最初被引入是为了浏览器可以知道用户是否想要双击放大网页。基本上,浏览器等待大约300毫秒是为了查看用户是否想双击,或仅敲击一次屏幕。

Out of the box, Ionic自动移除了300毫秒的延迟为了使Ionic app更有"原生"的感觉。 因此,其他的解决方案,如 fastclick 和 Angular的 ngTouch 不应该被引入,以避免冲突。

一些浏览器已经移除了延迟的某些设置,比如CSS属性touch-events: none或带有特定meta标签的viewport值。然而,每一种浏览器任然可以处理不同的点击,比如关闭或取消事件(像滚动的模板是一个按钮,或按住一个按钮向下)。对于已经移除300毫秒延迟的浏览器来说,处理跨浏览器处理点击,Ionic的点击系统仍是一个标准化,以便不管是什么设备,平台或版本,都有一个预期的响应。 此外, Ionic会阻止ghostclicks浏览器事件,清除延迟,仍然工作。

在一些例子中,第三方库也可以处理触屏事件,它能对tap事件进行干扰。例如,地图库,像Google或 Leaflet地图经常实现一个触屏检测系统,它会与Ionic的tap系统冲突。

禁用tap系统

要禁用一个元素或它的子元素的tap,添加data-tap-disabled="true"属性即可。

<div data-tap-disabled="true">
    <div id="google-map"></div>
</div>

额外提醒:

  • Ionic的 tap允许依赖Ionic的JavaScript滚动
  • 元素可以从DOM中添加和移除,但Ionic的tap不会添加和移除监听
  • 第一个"tap"之后不需要 "tap 延迟"(你可以尽最快的速度点击,他们也可以)
  • 最小的监听事件,只需被添加到文档上
  • 在每个平台/设备上,每个输入类型(select, textearea, range)正确对应in/out
  • 在每个平台/设备上正确的显示和隐藏虚拟键盘
  • input要用label包裹
  • 如果用户指针移动太远,不要关闭点击
  • 添加和移除一个 'activated' css 类
  • 多个单元测试对应每个脚本