iOS下click事件不冒泡的解决

前几天遇到了,使用zepto的.on进行click事件委托的时候,当委托到document,发现只有目标元素为a才行,现象就是click事件不会冒泡到document。

当时由于没有设备,没有过多的测试,最近部门新添好多iOS设备啦~~~btw ,今天发现jQuery的文档里面居然提到了这一点。

On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:

  1. Use natively clickable elements such as a or button, as both of these do bubble to document.
  2. Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
  3. Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copypaste on the element and cause it to be highlighted when touched.

简单翻译一下,就是

  1. 使用原生的支持click冒泡到document的元素,例如abutton
  2. 委托事件的时候,委托到body以下的元素上面
  3. 对目标元素使用CSS cursor:pointer, 或者应用于其父元素——包括html都行,不过会导致复制粘贴失效,而且点击时候高亮

工作上:最近再次多个任务交叉的感觉
上个月买的几盆蝴蝶兰长叶子了
最近买了两个手柄,通关了米老鼠幻影城堡、爱丽丝疯狂回归,现在开始玩以前没有机会玩的生化危机5

标签: ios, click, 冒泡

已有 3 条评论

  1. danny danny

    很实用的问题,再推荐两篇给大家看看,apple官方也对这个坑进行了说明
    https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6

    http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

  2. 何足道 何足道

    感谢,这个问题困扰了我很久

  3. wow,我感觉好像好久没有玩游戏了.好忙的样子~

添加新评论