300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > FastClick使用之trigger触发click失效

FastClick使用之trigger触发click失效

时间:2020-07-06 01:00:27

相关推荐

FastClick使用之trigger触发click失效

独角兽企业重金招聘Python工程师标准>>>

最近为了提升web app在ios上的点击效率,使用了FastClick.js,效果很明显,基本是点击后立马有反馈。可是发现一个问题,在使用模拟点击的时候,并不能触发点击的目的。

而以上代码,在安卓上,却能正常触发。

于是百度查找了相关的资料,找到以下内容(引用自/1.x/javascript/fastclick/)

不应用 FastClick 的场景

桌面浏览器;

如果viewport meta 标签中设置了width=device-width, Android 上的 Chrome 32+ 会禁用 300ms 延时;

Copy

viewport meta 标签如果设置了user-scalable=no,Android 上的 Chrome(所有版本)都会禁用 300ms 延迟。

IE10 中,可以使用 css 属性-ms-touch-action: none禁止元素双击缩放(参考文章)。

根据上面描述,终于知道在安卓之所以能生效,是因为属于FastClick不应用的场景,而IOS则应用上了FastClick的效果。于是跟踪代码,各种调试,发现了在ios上,需要调用“模拟两次触发”才能完成一次真正的点击事件;

于是写了如下扩展:

需要用到模拟点击事件的时候,就使用$("#btn").triggerFastClick()来代替原来的trigger("click");

目前暂时用这种方法处理了在FastClick环境下模拟触发点击失效的问题,不知是否有其他解决方法?

其他解决方案:

解决方法:

1. 【官方推荐】:当DOM元素需要一个non-synthetic click(即非人工触发的点击trigger)的时候,最好在该DOM元素上加上class="needsclick "(原文:http://ftlabs.github.io/fastclick/)

2. 使用2次trigger,即

$('.J_Spec').trigger(click_name);$('.J_Spec').trigger(click_name);

3. 在js代码中使用

if ($.os.android) window._fastClick.destroy();

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。