页面滚动期间的 tap 事件不会触发
发布于 6 年前 作者 jiehe 8367 次浏览 来自 问答

手指滑动 -> 页面滚动 -> 手指离开页面 -> 页面处于惯性滑动 -> 在这个时间点击页面固定元素

期待:触发固定元素的绑定事件

实际:页面滚动停止,并未触发事件

无法触发固定元素的绑定事件。  比如我有一个  fixed 的 导航,在页面处于惯性滑动时候,点击导航链接是无法跳转的,而是会停止页面滚动,这对于正常页面,是一个符合预期的反应。但对于不滚动的元素(position:fixed)无法触发 tap 事件就不符合直觉了。下面是简单的代码片段

wechatide://minicode/aF61XNm5722E

称上面的为情况一, 另外,还有一个更厉害的情况二

我原以为 fixed 的元素也属于整个 page, 正在滚动的是 page, 那么点击 fixed 的元素自然也算点击了 page,此时的反应为:页面停止滚动;从逻辑上讲也是算说的通,只是没那么完美

那么 我用一个 scroll-view 来滚动,  fixed 元素也成为了与 scroll-view 同级元素了,那么 scrool-view 还处于惯性滑动期间,我点击 scroll-view 内部的元素会停止 scrool-view 的滚动(实际也是如此)。若点击与 scroll-view 同级的 fixed 元素就会触发 tap 事件了吧,事实更刺激:没有任何反应,scroll-view 不会停止,继续着惯性滑动,tap 事件也不响应,直到 scroll-view 的惯性滑动结束后,点击 fixed 元素才会触发事件 。就是说 scroll-view 只要在滚动,点击 scroll-view 同级别的其他元素,就无法触发事件

上面说的都是针对 tap 事件,实测发现,touchstart 事件,情况一仍然不触发,情况二却可以触发 :)

3 回复

目前在你所提供的代码片段中,是描述的页面在滑动未结束的时候,点击页面的时候,滚动会停止,点击没有事件绑定的时候同样会停止的,同时在页面活动的时候是会阻塞其余的事件,至于你说提到的情况二,麻烦提供下相关的代码片段

一转眼半年多过去了,有后续吗

就说情况一,  请问一下, 在页面还处在惯性滚动的时间点, 点击一个绑定了事件的 fixed 元素,仅是停止页面的惯性滚动,而不触发事件,是否合理?

比如我要做一个自定义的 tabBar,这样的体验就会很差

情况二,我以为已经描述的够清楚了,稍微提供一下代码

---------------------------------

想不到只能回复一次,只能重新编辑了,情况二代码

wechatide://minicode/DBhsyNmR7c2w



-------------------------------------------

9-30号再次更新, 话说,你们交流社区的官方人员是不是有什么类似于 “消灭零回复”的 KPI任务,

回答问题基本都是索要代码片段,然后就置之不理了,是因为完成了 KPI?


搞笑的吧,为了复现,前后花了好几个钟头给你们反馈,就这么敷衍一下子么

回到顶部