FastClick使用之trigger触发click失效

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

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

1	`$("#btn").trigger("click");//模拟点击`

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

于是百度查找了相关的资料,找到以下内容（引用自http://amazeui.org/1.x/javascript/fastclick/）

不应用 FastClick 的场景

桌面浏览器；
如果 viewport meta 标签中设置了 width=device-width， Android 上的 Chrome 32+ 会禁用 300ms 延时；

Copy

1	`<meta` `name="viewport"` `content="width=device-width, initial-scale=1">`

viewport meta 标签如果设置了 user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟。
IE10 中，可以使用 css 属性 -ms-touch-action: none 禁止元素双击缩放（参考文章）。

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

于是写了如下扩展：

var notNeed = FastClick.notNeeded(document.body);

$.fn.triggerFastClick=function(){

this.trigger("click");

if(!notNeed){

this.trigger("click");

}

需要用到模拟点击事件的时候，就使用$("#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();

转载于:https://my.oschina.net/thinkive/blog/711305

FastClick使用之trigger触发click失效相关推荐

在jQuery中，a标签trigger触发click不起作用的原因和解决方法
最近在项目中发现,用jq的trigger无法触发a标签的click事件.我的代码如下: $('a').trigger('click') 查阅资料发现: jquery trigger把(type === ...
JQuery 的click失效，无法触发
前不久用js写评论的时候遇到的问题,当时就觉得很奇怪,自己写的代码没有报错,编译正常浏览器控制台调试,点击了Click也不反应,上网查询了很久也不见得有人提起过(可能是我不会搜索吧),多次搜索引擎查 ...
jQuery事件3——trigger触发事件
作用:触发事件,可传参数为事件类型(包括自定义事件)和传递给事件处理程序的额外数组参数 [例1]传事件类型 <!DOCTYPE html> <html lang="en&q ...
防止多次触发click事件
一.问题描述用户频繁触发同一表单的提交按钮可能会导致流程或程序紊乱二.需求满足问题需求,在不妨碍用户使用的情况下禁止程序多次被触发三.实现逻辑完成触发后解绑点击/相关事件四.实现代码 1. ...
Vue 之解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
一.简介官方文档: 通过上面官方文档的介绍我们可以得知两个重点: ① 通过v-html生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html代码被插入,也就是说通过v-html插入的h ...
jquery trigger触发a标签点击事件问题
最近在一个项目中使用trigger触发a标签的click事件,如:$('a').trigger('click'),但是一直未成功..触发不了. 经过百度查找才知道: $('a').trigger('c ...
JS触发Click操作以及获得事件源（转）
firefox下js触发click事件:<a href="http://zochegua.blog.163.com/blog/#" οnclick="test1(' ...
fastclick：处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
[C# 基础知识系列]专题五：当点击按钮时触发Click事件背后发生的事情
引言: 当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑 ...

FastClick使用之trigger触发click失效

不应用 FastClick 的场景

FastClick使用之trigger触发click失效相关推荐

最新文章

热门文章