前言
本文主要给大家介绍了关于在iOS下Safari浏览器点击事件失效的相关解决方案,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
问题描述
当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。
可以使用下面的代码在 iOS 中进行测试。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!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
使得元素变成了可点击的了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对快网idc的支持。
相关文章
猜你喜欢
- 个人服务器网站搭建:如何选择适合自己的建站程序或框架? 2025-06-10
- 64M VPS建站:能否支持高流量网站运行? 2025-06-10
- 64M VPS建站:怎样选择合适的域名和SSL证书? 2025-06-10
- 64M VPS建站:怎样优化以提高网站加载速度? 2025-06-10
- 64M VPS建站:是否适合初学者操作和管理? 2025-06-10
TA的动态
- 2025-07-10 怎样使用阿里云的安全工具进行服务器漏洞扫描和修复?
- 2025-07-10 怎样使用命令行工具优化Linux云服务器的Ping性能?
- 2025-07-10 怎样使用Xshell连接华为云服务器,实现高效远程管理?
- 2025-07-10 怎样利用云服务器D盘搭建稳定、高效的网站托管环境?
- 2025-07-10 怎样使用阿里云的安全组功能来增强服务器防火墙的安全性?
快网idc优惠网
QQ交流群
您的支持,是我们最大的动力!
热门文章
-
2025-05-27 75
-
Java concurrency集合之ConcurrentSkipListSet_动力节点Java学院整理
2025-05-29 21 -
2025-05-29 21
-
外贸建站系统推荐:CMS平台选择与WordPress教程指南
2025-05-25 25 -
Win11下载速度被限制怎么办 Win11下载速度被限制解决方法
2025-05-27 25
热门评论