问题
在一个带有 展开/收起 的列表里,使用了委托处理点击 查看更多 的逻辑,如下图:
代码如下:
|
|
这段代码在 iphone
上点开不了,安卓都是 OK
的。可以点一下 测试DEMO 体验一下
为什么呢
从网上搜到几篇文章提到 API-jQuery 有对 click
使用的提示:
On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:
- Use natively clickable elements such as a or button, as both of these do bubble to document.
- Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
- Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.
简单来说就是:
手机端的 IOS
(iPhone, iPad, iPod Touch
) 上,对于大多数元素来说,click
事件不会冒泡到 document.body
这个元素上,而且如果不满足下面的条件之一,不能和 .live()/.on()
使用:
- 使用原生可以冒泡到
document
的元素,如a,button
- 委托事件到
document.body
的子元素 - 给需要冒泡
click
的元素或者其父元素(包括document.documentElement
)设置cursor: pointer
,但是这样做不能 复制/粘贴 该元素内容,并且点击元素会高亮显示
解决方法
|
|
1、委托到目标元素的父元素
|
|
没啥兼容问题
2、设置目标元素 cursor: pointer
iphone6
上测试,复制粘贴没有问题,点击存在高亮
3、给body的子元素写一个click事件
参考 这篇文章
在冒泡阶段,有一个节点处理了该事件,它就不会丢弃该事件,会继续往上冒,冒到body 然后document 然后window
|
|
Demo
点 这里,扫码如下,
总结
对比以上三种解决方法,委托到目标元素的父元素 是最简单、没有兼容性问题的方法。
End.