iOS中Safari点击事件失效怎么办

小编给大家分享一下iOS中Safari点击事件失效怎么办，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站是一家集网站建设,高青企业网站建设,高青品牌网站建设,网站定制,高青网站建设报价,网络营销,网络优化,高青网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

问题描述

当使用委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。

可以使用下面的代码在 iOS 中进行测试。

<!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 使得元素变成了可点击的了。

以上是“iOS中Safari点击事件失效怎么办”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站题目：iOS中Safari点击事件失效怎么办
转载来源：https://www.cdcxhl.com/article0/pgshoo.html

成都网站建设公司_创新互联，为您提供自适应网站、App设计、搜索引擎优化、品牌网站建设、ChatGPT、面包屑导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容