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

demo:

<!DOCTYPE html>

<html lang="en">

  <head>

    <title></title>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="robots" content="index,follow"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="format-detection" content="telphone=no, email=no">

    <meta name="renderer" content="webkit">

    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <meta name="HandheldFriendly" content="true">

    <meta name="MobileOptimized" content="320">

    <meta name="screen-orientation" content="portrait">

    <meta name="x5-orientation" content="portrait">

    <meta name="full-screen" content="yes">

    <meta name="x5-fullscreen" content="true">

    <meta name="browsermode" content="application">

    <meta name="x5-page-mode" content="app">

    <meta name="msapplication-tap-highlight" content="no">

    <meta http-equiv="Expires" content="0">

    <meta http-equiv="Pragma" content="no-cache">

    <meta http-equiv="Cache-control" content="no-cache">

    <meta http-equiv="Cache" content="no-cache">

  </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）；

IOS下的 click 点击失效的更多相关文章

  1. ［转］iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  2. 移动端ios中click点击失效

    原因: Safari应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件. 所以,需要在点击的元素上加上{cursor:pointer},就解决了.当然还有别的方法,检点来说就 ...

  3. iOS Safari 中click点击事件失效的解决办法

    问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document  ...

  4. IOS下自定义click事件使用alert引发的血案

    使用过iscroll插件的同学都知道iscroll支持自定义事件,即在调用iscroll时参数赋值options.click = true. 接下来定义事件如: $clinicAppoint.on(' ...

  5. IOS - Safari中click点击事件无效

    做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...

  6. 兼容性之IOS下label 无法点击

    今天做移动端的页面时碰到一个稀奇的问题,那就是点击label无法选中与之相关的checkbox,下面是问题代码: <li class="list-item clearfix notif ...

  7. ios下按钮click事件点击穿透问题

    和app进行混合开发的时候,一个页面使用h5写的,按钮上绑定click事件会触发下面图片上的a链接导致跳转,页面如图 顶部是一个banner,分vr.视频.图片三部分,红框处的三个nav按钮绑定cli ...

  8. 移动端ios下H5的:active样式失效的解决方法

    在body上绑定一个touchstart事件,空函数就行: document.body.addEventListener('touchstart', function(){}, false) 或者在b ...

  9. chrome浏览器模拟手机端：jquery click()点击无效解决方法

    $(".sku-wrap .ok").click(); chrome浏览器模拟手机端,在油猴插件中写JS代码,然后发现click()点击失效. 解决方法:jquery的click( ...

随机推荐

  1. 233 Matrix

    233 Matrix 有一\(n\times m\)的矩阵\(\{a\}\),定义\(a[0][0]=0,a[0][1]=233,a[0][2]=2333,a[0][3]=23333...\),然后给 ...

  2. differential related impedance and termination

    Impedance (1) Z0 Z0 is the impedance of one T-line while other lines are held at 0. Single end. (2) ...

  3. 信息安全-浏览器-CORS：CORS（跨域资源共享）

    ylbtech-信息安全-浏览器-CORS:CORS(跨域资源共享) 1.返回顶部 1. CORS,全称Cross-Origin Resource Sharing,是一种允许当前域(domain)的资 ...

  4. 给自己立下一个flag先

    恩,今天开始写博客. 其实主要原因是被人甩了,想找个事情让自己忙起来. 主要原因是“男人没钱就是无能”,我是个应届毕业生.所以你懂的. 我不喜欢让心情不爽,所以只能找事情让自己忙起来.所以我开始立Fl ...

  5. 隐藏/显示jeecg-boot 后端管理页面的右侧的系统设置

    登录后台,通过添加一个下拉选项[系统设置]来控制系统的后侧系统设置,布局如下: 修改UserMenu.vue文件 1.全局搜索“账户设置”,找到对应的vue文件:UserMenu.vue 2.添加[系 ...

  6. 《DSP using MATLAB》Problem 7.37

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  7. 13_数据的划分和介绍之sklearn数据集

    1.数据集是如何划分?训练数据和评估数据不能使用相同数据,不然自己测自己,会使得准确率虚高,在遇到陌生数据时,不够准确. 2.数据集的获取: 通过load或者fetch方法. 3.数据集进行分割: 训 ...

  8. MFC安装与部署(程序打包)

    (发现csdn传照片实在是太麻烦, 不能够直接拖拽进来;所以我直接使用云笔记生成一张图片 直接完成!) (懒癌晚期-)

  9. [计蒜客] 矿石采集【记搜、Tarjan缩点+期望Dp】

    Online Judge:计蒜客信息学3月提高组模拟赛 Label:记搜,TarJan缩点,树状数组,期望Dp 题解 整个题目由毫无关联的两个问题组合成: part1 问题:对于每个询问的起点终点,求 ...

  10. Luogu P2845 [USACO15DEC]Switching on the Lights 开关灯(bfs)

    P2845 [USACO15DEC]Switching on the Lights 开关灯 题意 题目背景 来源:usaco-2015-dec \(Farm\ John\)最近新建了一批巨大的牛棚.这 ...