JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-4-18 17:18:05

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

demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>
    <div class="container"></div>
      <div class="target">点击我!</div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script>
      $(function () {
        // $(document).on('click', '.target', function () {})
        $('body').on('click', '.target', function () {
          alert('我被点击了！！！');
        });
      });
    </script>
  </body>
</html>

解决办法

解决办法有6种：

将 click 事件直接绑定到目标元素(即 .target ) 上
将目标元素换成 <a> 或者 <button> 等可点击的元素
给目标元素添加一个空的 onclick=""(<div class="target" onclick="">点击我!</div>)
把 click 改成 touchend 或 touchstart（注意加上preventDefault）
将 click 元素委托到非 document 或 body 的父级元素上
给目标元素加一条样式规则 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)

推荐后两种。推测在 Safari 中，不可点击元素的点击事件是不会冒泡到父级元素的。通过添加 cursor: pointer; 使得元素变成了可点击的了。

补充

问题

iOS系统 input 及 input内元素 cursor: pointer; 失效，使得在 iOS系统上需要借助 cursor 属性才能生效的 click 事件无法触发

解决办法

设置 font-size: 0;
把 click 改成 touchend （注意加上preventDefault）

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

iOS下的点击事件失效解决方法

解决办法

补充

问题

解决办法