zoukankan      html  css  js  c++  java
  • iOS下的点击事件失效解决方法

    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

  • 相关阅读:
    整数的位数,及反转
    判断1~n有多少个1
    C语言常用字符串函数
    C语言类型转换原理
    printf()函数压栈a++与++a的输出
    49 丑数( 时间空间效率的平衡)
    42 连续子数组的最大和(时间效率)
    41 数据流中的中位数(时间效率)
    40 最小的K个数(时间效率)
    一、简介 ELO商户类别推荐有助于了解客户忠诚度
  • 原文地址:https://www.cnblogs.com/newbo/p/11350830.html
Copyright © 2011-2022 走看看