问题描述

当使用委托给一个元素添加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 种可供选择：

  1. ​将 click 事件直接绑定到目标​元素（​​即 .target）上
  2. 将目标​元素换成 <a> 或者 button 等可点击的​元素
  3. ​将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上
  4. ​给​目标元素加一条样式规则 cursor: pointer;

​推荐后两种。从解决办法来看，​推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

iOS Safari 中点击事件失效的解决办法的更多相关文章

  1. 【javascript】iOS Safari 中点击事件失效的解决办法

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

  2. iOS中点击事件失效的解决办法

    解决办法有 2种可供选择: 将目标​元素换成 <a> 或者 button 等可点击的​元素 ​给​目标元素加一条样式规则 cursor : pointer;

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

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

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

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

  5. 在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  6. ios端position为fixed失效的解决办法

    关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...

  7. vue中router-link的click事件失效的解决办法

    title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...

  8. 使用PullToRefreshListView时遇到Item点击事件失效问题 解决方法

    最近在自己的项目中使用到了以下开源项目: https://github.com/nanchen2251/pullToRefreshDemo 相关介绍博客如下: http://www.cnblogs.c ...

  9. 苹果IOS下text-shadow与box-shadow失效的解决办法

    加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none

随机推荐

  1. 我的iphone6退货之路

    开篇 匆匆这一年又快结束了,眼看年关将近,老婆的生日也快到了,正打算给老婆买个礼物,由于现在老婆用的手机是公司的工程机,而且还是低端产品,所以一直想给老婆改善改善,也算是对老婆这一年来辛苦的默默的支持 ...

  2. java rest接口返回不完整的json数据

    ngix配置有问题,数据量大时把部分数据给拦截了. {"userId":237,"loginName":"mingshi","us ...

  3. SQLSERVER 中GO的作用详解

    具体不废话了,请看下文详解. ? 1 2 3 4 5 6 7 8 9 10 use db_CSharp go  select *,  备注=case  when Grade>=90 then ' ...

  4. bzoj 1486: [HNOI2009]最小圈 dfs求负环

    1486: [HNOI2009]最小圈 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1022  Solved: 487[Submit][Status] ...

  5. 【技术贴】SqlServer2008 R2 安装失败提示出现以下错误 服务 MSSQLSERVERO

    Feature: Analysis Services  Status: 失败: 请查看日志了解详细信息  MSI status: 已通过  Configuration status: 失败: 请查看下 ...

  6. SqlTransaction的解析

    SqlTransaction的解析 2011-10-10 19:48 2757人阅读 评论(1) 收藏 举报 exceptionsql serverinsertcommandobjectstring ...

  7. 14.6.11 Configuring Optimizer Statistics for InnoDB 配置优化统计信息用于InnoDB

    14.6.11 Configuring Optimizer Statistics for InnoDB 配置优化统计信息用于InnoDB 14.6.11.1 Configuring Persisten ...

  8. Linux Shell编程（18）—— 循环控制

    影响循环行为的命令break, continuebreak和continue这两个循环控制命令[1]与其它语言的类似命令的行为是相同的. break命令将会跳出循环,continue命令将会跳过本次循 ...

  9. Activity声明周期容易出现的问题

    了解activity的生命周期,不仅仅是回答面试官的几个小问题:下面这篇文章不错,截取个人认为优秀的部分分享给大家,欢迎交流.感谢原作者 /** * 示例向我们展示了在 Activity 的配置改变时 ...

  10. HDU -- 4496

    D-City Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Subm ...