2020 Sep 2020 Sep

Chrome 下 touch 事件 inline 元素监听不生效

昨天对博客首页进行了重新设计,使用原生 Javascript 对文章标题添加 Touch 监听事件时,因为一个疑似 BUG 导致了一系列奇葩的问题。

以下描述发生在 Blink 引擎浏览器内,也就是一般使用的 Chrome, Chromium 浏览器及以其为基础进行开发的其它浏览器;其它浏览器如 Safari, FireFox, iOS 上的 Chrome (webkit 引擎)则不会因为以下指出的不同而差异化表现。

  • 当 a 元素是默认的 inline 样式,且页面仅有 touchstart 或者 touchmove 监听事件,这针对 a 元素的两个事件都不会触发;
  • 当继续添加 touchend 监听事件后, touchstart 监听事件开始触发,但 touchmove 事件依旧不触发;
  • 再次添加 pointerdown 监听事件(应该还有其它事件也能帮助触发), touchmove 监听事件触发。

当把 a 元素样式改成 inline-block 或者 block 后,则一切正常…

/*This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. |bitbili.net| This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.*/