我们在写移动端H5的时候，有时候会遇到ios点击无反应的情况，当委托给document，就会发生，为啥，背后到底发生了什么？先来个逗逼的小故事。
哔哩哔哩，万圣节还没到，却遇见ios的一类小鬼，几次碰头，直道追击，落星击，为我所用，回来思忖半天，这可不行，落星击是不得已的招式，耗体力，需考虑其他招式控制，诶，要把我的道具用起来了，作为道具，要有其用武之地呀，捉鬼何须达boss亲自出马，委托给document即可。
拿上document道具，咒语来：“$document.on('click', 'div', function(){}), ‘click’小鬼， 定“，没反应。
——“看我使出onclick神器。哈哈，还不定，没招了吧，哼，我叫你往东，你怎敢往西，这就是你侵犯我达也的下场”。
——“切，不就是偷偷在我身上撒了onclick粉吗，被你逮住，哼，有什么能耐”。
——“真是鬼口里听到的都是鬼话，得，让你心服口服”。
清理好oncllick=“void(0)”，小鬼立马跑路，遁形于无踪。
——“道可道，非常道，名可名，非常名，你本无形，却有现于iosWeb大道，无所制之，这岂能容你，换符，cursor：pointer符来~”，朱砂一点，写上符作对象：”div“，“$document.on('click', 'div', function(){ ”小鬼回“ }), 回“。
只见小鬼保持着奔跑的姿势，却被拖着往回走，乐活我了。
——“你你你……我我我，不行，再来”
——”哟呵，爷我就陪你玩玩~“。
小鬼使出“鬼泣”，迷幻达也我施法，烟幻雾蒙中，已不见踪影，额，错了，鬼本来就没有影子。
——”文档点击查元素，一重缠是一重关，如有冒泡touch来，不出阴阳八卦形。touchstart 收”。
只见touchstart使出九阴白骨爪抓住了小鬼，迅速立定！
——“俗话说，事不过三，小鬼，事已至此，爷我就不陪你玩了，我得意地笑，我得意地笑，吼哈哈……”
自编的一段小故事，一笑而过。说回程序猿人的方言吧，话说，ios的Safari有一bug，对于非交互式元素（如div，span），事件委托document/body click点击事件无效，移动端的所有元素会监听到touch事件，touch无此问题，android也无此坑。解决的方法有四：
1. 元素添加onclick=“void(0)”属性；
2. 元素设置cursor: pointer 样式，使其具有交互性质；
3. 利用touch取代click；
4. 换元素，用<a>，<btn>等交互式元素替代。
具体问题具体分析，如有说法也将竖耳听之。
MDN有此解释：https://developer.mozilla.org/en-US/docs/Web/Events/click
网友评论