移动开发那些坑之——safari mobile click事件的冒泡bug

今天在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/

2.使用zepto.js的1.0rc1版本的tap事件——没有仔细看文档,经我测试V1.0-1.1.6等等这几个版本都不好使

3.欢迎交流

时间: 2024-10-13 16:29:27

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

HTML5开发移动web应用—JQuery Mobile(4)-事件

Jquery Mobile中提供了丰富的事件处理和检测机制. 1.滚动事件 在Jquery Mobile中,使用scrollStart和scrollStop事件来监听用户开始滚动和停止滚动的事件.以scrollStart为例,使用代码如下: $(document).on("scrollstart",function(){ alert("开始滚动!"); }); 2.界面相关的事件 一个页面从激活到加载完毕,在jquery mobile中共被分为四个部分的事件,它们分

前端学习---移动端vue开发踩坑记

前言: 大概两个月前投身于一个项目中去,项目是一个移动端的项目,所选用的框架是时下比较流行的vue.这篇文章也是针对这个项目和以前自己学习时的一些总结,包括一些通用的移动端开发要注意的事项.vue开发遇到的一些问题.本文的目的是为了在以后的开发中我们可以避免这些坑,提高我们的开发效率. 一.移动端开发特有问题: 1.移动端样式的兼容性: 在当前移动端的开发要面对各种不同的手机,不同的手机DPI也是不同的,比如Iphone 8的DPI就是2,Iphone 8P的DPI就是3.为了让页面可以兼容不同

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

这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作.因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕. 于是,

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

原文: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作.因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕.

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

今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是讲原理,这里写个简单的代码,大家可以复制到自己页面中去实验: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi

网站移动版本开发踩坑实录三

鉴于本人在移动wap上的开发经验少,遇到的问题确实不少,很多问题都是为了项目紧急上线而不得已的写临时性的fixed的方案,所以解决方法也存在缺陷,这次记录的虽然没有什么高大上的东西,把几个明显的问题和解决过程记录下来. 1.ios系统浏览器事件会触发两次 问题发现于ipad.iphone上,起初遇到这个问题本以为自己在绑定了两次事件(touchstart click),但是由于最新的ipad对click事件不支持以及为了防止重复绑定事件,因此我特意处理了关于touchstart和click做了一

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

前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着也是不错的. 首先,我先说一下touch事件在开发中存在的两个问题: 1.touch事件在某些场景下存在点击穿透的问题. 2.touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件. 1问题的原因:移动端事件触发的

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面事件与 deferred

在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件,而页面事件由于事件数较多,并且涉及 jQuery 中一个比较复杂的对象 deferred ,因此在本文中单独说明.jQuery Mobile 页面事件使用分为页面加载事件 (Page load events),页面跳转事件 (Page change events),页面显示/隐藏事件 (

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

iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成