一、由于某些特殊情况下,需要用到事件委托,比如给动态创建的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. 为opencv添加contrib库

    自从进入3.X时代以后,OpenCV将代码库分成了两部分,分别是稳定的核心功能库和试验性质的contrib库,之前已经讲过opencv的核心库的安装,现在讲解一下其附带的依赖库的安装. 一.Cmake ...

  2. WPF数字滚动效果

    和WPF数字滚动抽奖有区别,WPF数字滚动抽奖是随机的,而这里是确定的. 为了系统演示,这个效果通宵加班写了整整6个小时,中间就上了次厕所. 代码: RollingNumberItemCtrl.xam ...

  3. 手动封装on,emit,off

    on 绑定 emit 触发 off 解绑 //存放事件eventList = {key:valhandle:[]} 1对多on(eventName,callback);handle:-------N多 ...

  4. Shell-10--if

  5. Pycharm中自动生成作者,日期等信息

    初次安装使用PyCharm,在新建.py文件时会发现文件头并没有什么信息,因此,使用模板会比较方便.方法如下: 1.打开PyCharm,选择File--Settings 2.依次选择Editor--- ...

  6. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  7. Jquery 动态追加控件并获取值

    先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...

  8. Win10上安装Keras 和 TensorFlow(GPU版本)

    一. 安装环境 Windows 10 64bit  家庭版 GPU: GeForce GTX1070 Python: 3.5 CUDA: CUDA Toolkit 8.0 GA1 (Sept 2016 ...

  9. [转]idea导入eclipse的web项目

    https://www.cnblogs.com/xiaoBlog2016/archive/2017/05/08/6825014.html 一.导入自己的web项目 步骤:File->New-&g ...

  10. Hibernate懒加载解析

    Hibernate懒加载解析 在Hibernate框架中,当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有限 ,为了减少并发量,减少系统资源的消耗,这时Hibernate用懒加载机制来 ...