IOS设备上给body绑定click事件不生效及其解决办法
事件背景:
最近在做一个移动端业务的时候碰到一个bug,在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效。
思考:
暂借助jquery展示下事件绑定代码,将所有标签含有data-tip属性的元素通过事件代理至body
$('body').on('click','[data-tip]',function(e){
console.log($(this.).attr('data-tip'))
})
这样做在android和pc上都可以正常实现,但是在ios上面对部分标签尽然不生效。比如 tr , span ...这样的标签
解决办法:
1.将click事件换成touch事件,同时还可以解决300ms的click延迟问题,但是需要e.stopPropagation()来阻止冒泡的处理会非常麻烦。
2.在对不能正常冒泡的元素上再进行一次事件绑定,比如对于tr可以在<table>上再进行一次事件代理。
3.最简洁的办法,在不能正常冒泡的元素的css属性里面添加,cursor:pointer属性。
4.换成可以正常冒泡的标签。
IOS设备上给body绑定click事件不生效及其解决办法的更多相关文章
- 关于动态添加的html元素绑定的事件不生效的解决办法
1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...
- ios 设备用jquery live绑定 click 事件不管用
问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用 解决办法:1.直接在标签写onclick事件 2.给需要绑定的标签添加css样式{cursor:pointe ...
- [ 面试没回答上的问题2]IOS上给body绑定click事件的bug
面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari ...
- JQuery on绑定click无效的的bug解决办法?
如果你在移动端使用zepto.js, touch 来代替click事件,那就没有上述标题的问题了.如果你仍然使用了click,在点击事件中苹果机就可能出现无效的结果. 第一种方法: 解决的方法很巧妙, ...
- iOS设备上出现的click,live,on点击失去效果
iOS设备上出现的点击事件失效,但是在Android上可以正常使用, 1.iOS设备对标签点击限制,不认为是可点击的标签,需要给要绑定点击事件的标签加上一个样式,cursor:pointer:这样就可 ...
- IOS上给body和html绑定click事件的坑
场景: 在ios上(包括iPhone和ipad) 给window ,html,document,body绑定click事件,点击不会触发 由于ios浏览器都用的safari内核,所以ios浏览器全部中 ...
- vue 移动端在div上绑定click事件 失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
- 在Windows笔记本上调试运行在iOS设备上的前端应用
我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...
- jquery批量绑定click事件
jquery批量绑定click事件: var selects = $(".public_select dd ul li"); debugger; /*$(".public ...
随机推荐
- Android 常用UI控件之Tab控件的实现方案
实现Tab的方式有多种 1,ActionBar有两种模式可以实现,但是已经过期 tab模式tab在顶部,分裂模式tab在底部(同时所有action item都在底部). 2,PagerTitleStr ...
- 【HDOJ】1045 Fire Net
经典深搜.注意满足条件. #include <stdio.h> #include <string.h> #define MAXNUM 5 char map[MAXNUM][MA ...
- 在Sublime Text 3中配置编译和运行Java程序
设置Java的PATH环境变量 在Java的jdk的bin目录下建立新文件runJava.bat 文件内容如下: @echo off cd %~dp1 echo Compiling %~nx1.... ...
- hadoop 序列化源码浅析
1.Writable接口 Hadoop 并没有使用 JAVA 的序列化,而是引入了自己实的序列化系统, package org.apache.hadoop.io 这个包中定义了大量的可 ...
- MySQL配置文件-my.ini
下面允许我介绍一下MySQL的my.ini配置文件: my.ini是什么? my.ini是MySQL数据库中使用的配置文件,修改这个文件可以达到更新配置的目的. my.ini存放在哪里? my.ini ...
- apache开源项目--CouchDB
Apache CouchDB 是一个面向文档的数据库管理系统.它提供以 JSON 作为数据格式的 REST 接口来对其进行操作,并可以通过视图来操纵文档的组织和呈现. CouchDB 是 Apache ...
- spring--注解注入--12
12.1 概述 12.1.1 什么是零配置 在SSH集成一章中大家注意到项目结构和包结构是不是很有规律,类库放到WEB-INF/lib文件夹下,jsp文件放到WEB-INF/jsp文件夹下,web ...
- LightOJ 1259 Goldbach`s Conjecture 水题
不想说了 #include <cstdio> #include <iostream> #include <ctime> #include <vector> ...
- FAQ_浏览器_ChromeDriver报错
Started ChromeDriverport=2437version=23.0.1240.0log=D:\workspace\WebdriverTest\chromedriver.log[0704 ...
- 测试一个函数的运行时间(C++)
#include <ctime> static clock_t Start,Finish; Start=clock(); fun(); Finish = clock(); double t ...