IOS的Safari浏览器中,点击事件失效的原理及解决办法
这里做了事件委托,简单区分一下【目标元素】和【代理元素】,为后续论述理解做铺垫。
【目标元素】:实际希望点击的元素,可以是任意标签。
【代理元素】:代替【目标元素】触发点击事件的元素,有可能是目标元素的父级元素,document,body等。
一、现象
当使用事件委托给【目标元素】添加 click 事件时,如果【代理元素】是 document或body,并且【目标元素】是默认不可点击的(如 div, span 等),此时click事件会失效。如果【目标元素】是可点击的(比如 button、a 标签),此时click事件还是有效的。
二、原理
移动端页面,在做click事件委托的时候,不要委托到document上,因为不管是安卓还是IOS,document是没有click事件的,只有touch事件,而且有些标签在IOS上也是没有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父级元素。
IOS的Safari浏览器中,点击事件失效的原理及解决办法的更多相关文章
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- Ubuntu 14.04 LTS 火狐浏览器中,鼠标选择文字被删除的解决办法
这篇文章主要介绍了Ubuntu 火狐浏览器中,鼠标选择文字被删除的解决办法,需要的朋友可以参考下在终端中输入命令: ibus-setup将 “在应用程序窗口中启用内嵌编辑模式“ 选项取消
- ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法
1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...
- 在chrome浏览器和在IE浏览器中显示的页面样式不一样的解决办法
在IE浏览器中添加 一行代码即可:<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 位 ...
- Ubuntu 火狐浏览器中,鼠标选择文字被删除的解决办法
copy from :http://blog.csdn.net/shadow066/article/details/50628019 在终端中输入命令:ibus-setup 将 “在应用程序窗口中启用 ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- ios移动端浏览器点击事件失效的解决方案
点击事件失效的原因可能是因为,你用了事件代理了, 比如这样 $(document).on("click",".fd",function(){ }) 这段代码在安 ...
- javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
- a标签中有点击事件
我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...
随机推荐
- 【jquery】字符ascii码转换函数
js 字符ascii码转换函数 字符转ascii码:用charCodeAt();ascii码砖字符:用fromCharCode(); 看一个小例子 <script> str="A ...
- AFNetworking request failed unacceptable content type text/html
今天体验AFNetwork 3.1.0 进行数据解析,但是解析数据控制台一直都输出这样的 error 结果: 于是,照着以前AFN2.+版本的进行设置: 结果发现在新版本的 AFN 上不能设置了.既然 ...
- CUDA中Bank conflict冲突
转自:http://blog.csdn.net/smsmn/article/details/6336060 其实这两天一直不知道什么叫bank conflict冲突,这两天因为要看那个矩阵转置优化的问 ...
- Warp divergence
Threads are executed in warps of 32, with all threads in the warp executing the same instruction at ...
- iOS 文档分享相关
在非系统预览情况下 指定文件打开系统分享菜单 NSString *savedPath = [NSHomeDirectory() stringByAppendingString:[NSString s ...
- 浅析 - 提高xib(Interface Builder)高效工作的几个小技巧
本文译自:8 Tips for working effectively with Interface Builder(需FQ)先来看看目录:介绍使view的Size与view中的Content相适应按 ...
- JQ 练习题
1.留言板 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- Android Programming: Pushing the Limits -- Chapter 6: Services and Background Tasks
什么时候使用Service 服务类型 开启服务 后台运行 服务通信 附加资源 什么时候使用Service: @.任何与用户界面无关的操作,可移到后台线程,然后由一个Service来控制这个线程. 服务 ...
- ARPPING
http://www.tuicool.com/articles/M7B3umj http://lixcto.blog.51cto.com/4834175/1571838/
- 在ubuntu上搭建开发环境3---解决Y470一键系统重装之后恢复ubuntu引导启动的方法
2015/08/18 将知识.常用的操作整理出来一定要完整,注意细节. 就像下面是再2015.04.27时候整理的,当时确实实验成功了,但是可能忘记记下具体的细节,尤其是3.4.5.6步骤中的关于盘符 ...