问题描述
给 iscroll
的子元素绑定 click
事件,在 猎豹,chrome
, UC
等失效
原因
后来查阅 文档 发现已经提示我们了
options.click
为了重写原生滚动条,iScroll
禁止了一些默认的浏览器行为,比如鼠标的点击。如果你想你的应用程序响应click
事件,那么该设置次属性为true
。请注意,建议使用自定义的tap
事件来代替它(见下面)。
默认属性:false
options.tap
设置此属性为true
,当滚动区域被点击或者触摸但并没有滚动时,可以让iScroll
抛出一个自定义的tap事件。
这是处理与可以点击元素之间的用户交互的建议方式。侦听tap
事件和侦听标准事件的方式一致。示例如下:
12 element.addEventListener('tap', doSomething, false); \\ Native$('#element').on('tap', doSomething); \\ jQuery你可以通过传递一个字符串来自定义事件名称。比如:
tap: ‘myCustomTapEvent’
在这个示例里你应该侦听名为myCustomTapEvent的事件。
默认值:false
在源码中可以找到实现
配置方案
1、开启 click
配置
- 带有
href
的a
可以点击 - 不会有 300ms 延迟,在
touchend
触发的 - 不会冒泡,被
e._constructed
禁用了
2、开启 tap
配置
- 带有
href
的a
还是点击不了
3、和 zepto
使用
如果是使用 $('').on('click')
和 原生的 addEventListener
没有差别,这个时候需要开启 click: true
如果是使用 $('').on('tap')
,配置 click: false, tap: false
就好了;如果配置了 tap
反而会触发两次 tap
事件
4、 fastclick
使用
配置 click: false, tap: false
,某些安卓机(三星)绑定 click
还是点不了
配置 click: true
,IOS
点击不了(双击好像可以),三星反而能点击了
5、 zepto, fastclick
使用
配置 click: false, tap: false
,使用 $('').on('click')
在某些安卓机不能点,开启 click: true
,IOS
反而不能点
配置 click: false, tap: false
,使用 $('').on('tap')
好像没啥问题;如果配置了 tap: true
反而会触发两次 tap
事件
总结
测试机型有限,也不知道还有哪些坑(使用了 fastlick
好晕)。综上,如果使用 iscroll
想要监听内部元素的点击事件:
- 无论有没有
fastclick
,使用zepto('').on('tap')
应该是保险的; - 或者开启
tap: true
配合原生的addEventListener(tap)
End.