今天在iphone6 plus的safari上测试这么一段代码:

<script>
$(document).on('click','.callApp', function() {
alert("hehe");
})
</script>
<div class="callApp caMiddle">打开app,马上参加活动</div>
<a href="javascript:;" class="callApp caMiddle">打开app,马上参加活动</a>
<img src="http://news.baidu.com/resource/img/logo_news.gif" alt="test" class="callApp">

发现,点击<img>和<a>是可以触发事件的,但是点击<div>无效。

1.起初,我以为是引用的zepto的问题,后来用了jquery之后,发现也是这个表现,并且,PC和Android设备都没有问题,唯独ios的safari无法触发事件。

2.我把click事件换成touchstart之后,事件又都可以触发了。

怪异。

3.难道是事件代理Safari不支持?我尝试去掉代理直接注册事件,测试发现,ok了。

4.那,我把事件代理到body下面的某一个div容器上,继续测试,发现也是ok的。

5.难道是safari事件冒泡,没有冒到document上来?测试下面一段代码:

document.addEventListener("click",function(e){
alert(e.target.tagName)
},false)

5.果然,还是跟最开始的现象一样,点击<img>和<a>是可以触发,点击<div>无效

6.google了一下,果然这个万恶的safari是有bug的,我英文不好,大家可以去看下这个http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html

解决方案

方案1.
添加样式body{cursor:pointer}——原因很奇葩,参见http://stackoverflow.com/questions/10165141/(推荐)
备注:这里最好通过js动态判断是ios再加此样式;如果都加上,那Android设备会出现点击屏幕全屏出现浅蓝色或浅红色<a>触感反馈的样式遮罩。

方案2.
使用zepto.js的1.0rc1版本的tap事件——没有仔细看文档,经我测试V1.0-1.1.6等等这几个版本都不好使(tap有一个很傻比的地方,你摁住慢慢滚屏的时候,tap会触发,其实只是在滚屏,但是它似乎模拟click的时候没有去判断start和end的偏移范围)

3.欢迎交流

移动开发那些坑之——safari mobile click事件的冒泡bug的更多相关文章

  1. safari浏览器click事件要点击两次才有响应出现闪烁

    闪烁问题 由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题. 因为ios safari浏览器中对触摸事件的响 ...

  2. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  3. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  4. 关于IOS浏览器:document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  5. click事件触发也有失灵的时候?

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  6. [转]iOS Safari 中click点击事件失效的解决办法

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

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

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

  8. 移动端开发用touch事件还是click事件

    前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着 ...

  9. 点击label时click事件被触发两次的坑

    今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑,点击label的时候,监听的click事件被执行两次: 具体代码如下: <div id="test"> & ...

随机推荐

  1. 在线浏览PDF之PDF.JS (附demo)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  2. JavaScript Math和Number对象

    目录 1. Math 对象:数学对象,提供对数据的数学计算.如:获取绝对值.向上取整等.无构造函数,无法被初始化,只提供静态属性和方法. 2. Number 对象 :Js中提供数字的对象.包含整数.浮 ...

  3. StatePattern(状态模式)

    /** * 状态模式 * @author TMAC-J * 状态模式和策略模式很像,其实仔细研究发现完全不一样 * 策略模式各策略之间没有任何关系,独立的 * 状态模式各状态之间接口方法都是一样的 * ...

  4. FreeMarker:怎么使用

    第一个FreeMarker程序 1. 建立一个普通的java项目:testFreeMarker 2. 引入freemarker.jar包 3. 在项目目录下建立模板目录:templates 4. 在t ...

  5. JavaScript事件代理和委托(Delegation)

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  6. 港真,到底应该选择OA还是BPM?

    越来越多企业意识到流程管理的重要性,但是,选择OA还是BPM,却让他们产生了选择困难症. 一方面,企业皆注重流程的高效运转,最好内外部的业务都能用一个系统来解决.所有流程一天就能上线什么的,那就更好啦 ...

  7. [DJANGO] excel十几万行数据快速导入数据库研究

    先贴原来的导入数据代码: 8 import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "www.setting ...

  8. BZOJ 1391: [Ceoi2008]order [最小割]

    1391: [Ceoi2008]order Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1509  Solved: 460[Submit][Statu ...

  9. 几款主流 NoSql 数据库的对比

    最近小组准备启动一个 node 开源项目,从前端亲和力.大数据下的IO性能.可扩展性几点入手挑选了 NoSql 数据库,但具体使用哪一款产品还需要做一次选型. 我们最终把选项范围缩窄在 HBase.R ...

  10. what's deviceone

    DeviceOne技术介绍 一.     DeviceOne是什么 DeviceOne(以下简称Do)是一个移动开发的平台或技术,与之对等的是Android移动开发技术,iOS移动开发技术,Windo ...