一、由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)
目标元素:动态创建的元素,最终click事件需要绑定到该元素

代理元素:动态创建的元素的父级元素,或者document,body等。

二、BUG情况

当使用事件委托给【目标元素】添加 click 事件时,如果【代理元素】是 document或body,并且【目标元素】是默认不可点击的(如 div, span 等),此时click事件会失效。如果【目标元素】是可点击的(比如 button、a 标签),此时click事件还是有效的。

三、解决方案3种

1、【代理元素】可以是【目标元素】的父级元素,document,body等,但【目标元素】必须为a或者button可点击的标签。

尽量使用touch事件或者tap事件,如果你需要click事件的延迟效果来达到某些交互,尽量把click事件绑定在a或者button可点击的标签上。

2、【代理元素】必须是【目标元素】的非document,body父级元素,【目标元素】可以是任意标签。

将click事件委托到非document或body的父级元素上。

3、【代理元素】可以是【目标元素】的父级元素,document,body等,【目标元素】可以是任意标签,但是要设置cursor: pointer;。

出现上述点击事件失效的问题,让我们不得不体会到标签语义化的重要性,于是这里建议大家写代码时,【目标元素】多用a或者button可点击的标签,【代理元素】多用非document,body父级元素。

本人摘自:http://www.cnblogs.com/camille666/

关于IOS下click事件委托失效的解决方案的更多相关文章

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

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

  2. Jquery 在ios上事件委托失效

    点击通过js遍历出来的列表,跳转页面.点击事件委托在document上, 像这样: $(document).on("click",".nav",function ...

  3. iscroll5在使用情况下click事件失效的问题

    转载自:http://www.52html5.com/?p=2618 Bug描述: iOS.android4.4+下不能触发click事件. Bug解决: 调用iscroll插件,增加配置参数:cli ...

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

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

  5. vue router 修改title(IOS 下动态改变title失效)

    在ios下app  设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加   ...

  6. ios下fixed回复框bug的解决方案

    前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...

  7. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  8. 微信小程序在ios下Echarts图表不能滑动的解决方案

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...

  9. jQuery中click事件多次触发解决方案

    jQuery 中元素的click事件中绑定其他元素的click事件. 因为jQuery中的click事件会累计绑定,导致事件注册越来越多. 解决方案: 1.能够避开,避免把click事件绑定到其他元素 ...

随机推荐

  1. Learning WCF:Fault Handling

    There are two types of Execptions which can be throwed from the WCF service. They are Application ex ...

  2. Linux下Redis安装使用教程

    https://redis.io/download 第一步:安装redis需要在有c语言的编译环境下,执行命令安装c语言环境: yum install gcc-c++ https://blog.csd ...

  3. Javascript高级编程学习笔记(6)—— 流程控制语句

    话不多说,我们直接开始进入今天的主题 流程控制语句 首先什么是流程控制语句呢? 顾名思义,就是控制流程的语句. 在JS中语句定义了ECMAScript中的主要语法,让我们可以使用一系列的关键字来完成指 ...

  4. 程序性能调优工具之gprob

    1 简介改进应用程序的性能是一项非常耗时耗力的工作,但是究竟程序中是哪些函数消耗掉了大部分执行时间,这通常都不是非常明显的.GNU 编译器工具包所提供了一种剖析工具 GNU profiler(gpro ...

  5. ajax 请求被终止 chrome查询发现请求状态status为canceled

    检查页面的network执行中发现页面被刷新了url改变了导致请求在请求过程中被终止了. 检查代码发现在 submit方法中最后写了个  location.reload();方法 来重载页面 虽然是卸 ...

  6. Java RMI 概观

    RMI是Java的一组拥护开发分布式应用程序的API. RMI使用Java语言接口定义了远程对象,它集合了Java序列化和Java远程方法协议(Java Remote Method Protocol) ...

  7. 【深入 MongoDB 开发】使用正确的姿势连接分片集群

    MongoDB分片集群(Sharded Cluster)通过将数据分散存储到多个分片(Shard)上,来实现高可扩展性.实现分片集群时,MongoDB 引入 Config Server 来存储集群的元 ...

  8. app自动化测试之实战应用(魅族计算器)

    模拟魅族计算器加法计算: from appium import webdriver desired_caps = {} desired_caps['deviceName'] = '621QECQ23D ...

  9. java中的字符、字符串及数字之间的转换(转)

    一.string 和int之间的转换 1.string转换成int  :Integer.valueOf("12") 2.int转换成string : String.valueOf( ...

  10. 课程五(Sequence Models),第一 周(Recurrent Neural Networks) —— 3.Programming assignments:Jazz improvisation with LSTM

    Improvise a Jazz Solo with an LSTM Network Welcome to your final programming assignment of this week ...