iOS Safari 中点击事件失效的解决办法
来源:互联网 发布:淘宝营业执照代办真假 编辑:程序博客网 时间:2024/06/05 00:43
问题描述
当使用委托给一个元素添加click
事件时,如果事件是委托到 document
或 body
上,并且委托的元素是默认不可点击的(如 div
, span
等),此时 click
事件会失效。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>iOS click bug test</title> <style> .container { } .target { display: block; text-align: center; margin: 100px 30px 0; padding: 10px 0; border: 1px solid #ccc; } </style></head> <body> <div class="container"> <div class="target"> Click Me! </div> </div> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript"> // 或者 $(document).on('click', ....) $('body').on('click', '.target', function (e) { alert('click'); }); </script></body> </html>
解决办法
解决办法有 4 种可供选择:
- 将
click
事件直接绑定到目标元素(即.target
)上 - 将目标元素换成
<a>
或者button
等可点击的元素 - 将
click
事件委托到非document
或body
的父级元素上 - 给目标元素加一条样式规则
cursor: pointer;
推荐后两种。从解决办法来看,推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer
使得元素变成了可点击的了。
0 0
- iOS Safari 中click点击事件失效的解决办法
- iOS Safari 中点击事件失效的解决办法
- iOS Safari 中点击事件失效的解决办法
- iOS Safari 中click点击事件失效的解决办法
- Android中ListView点击事件失效的解决办法
- ListView中item点击事件失效的解决办法
- IOS 点击事件失效
- jquery使用("#id").click(function(){})点击事件失效的解决办法
- Android中ListView实现子控件点击事件后ListView点击事件失效解决办法
- Android中ListView实现子控件点击事件后ListView点击事件失效解决办法
- js点击事件在ios中失效的3种解决方案
- 关于listview中onItemClick点击事件失效的解决方法
- ios上safari的事件模型(一)
- ListView中Item点击事件失效
- ios h5 点击事件失效及点击延迟
- iOS中UIAlertView的点击响应事件
- iOS UIButton点击事件传递参数的解决办法
- onchange第二次点击失效的解决办法
- Python Nmap篇
- TCP 协议三次握手
- 我的服务器管理实践小记(1)——利用Xshell远程登录服务器
- API Guides之Activity
- Java并发编程与内存模型:volatile关键字解析
- iOS Safari 中点击事件失效的解决办法
- 问题7--httpd报错
- 关于数据库主键和外键
- Proxy代理模式之应用
- Printf的用法
- 多重背包问题
- 文章标题
- 怎么判断List集合是否为空?
- 蓝桥杯:算法训练 6-1 递归求二项式系数值