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

忘是亡心i 2022-10-01 01:51 188阅读 0赞

### 问题描述 ###

当使用委托给一个元素添加`click`事件时，如果事件是委托到 `document` 或 `body` 上，并且委托的元素是默认不可点击的（如 `div`, `span` 等），此时 `click` 事件会失效。

<!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>iOS click bug test</title>
    
        <style> .container { } .target { display: block; text-align: center; margin: 100px 30px 0; padding: 10px 0; border: 1px solid #ccc; } </style>
    </head>  
    <body>  
        <div class="container">
            <div class="target"> Click Me! </div>
        </div>
    
        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript"> // 或者 $(document).on('click', ....) $('body').on('click', '.target', function (e) { alert('click'); }); </script>
    </body>  
    </html>

### 解决办法 ###

解决办法有 4 种可供选择：

1.  将 `click` 事件直接绑定到目标元素（即 `.target`）上
2.  将目标元素换成 `<a>` 或者 `button` 等可点击的元素
3.  将 `click` 事件委托到非 `document` 或 `body` 的父级元素上
4.  给目标元素加一条样式规则 `cursor: pointer;`

推荐后两种。从解决办法来看，推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 `cursor: pointer` 使得元素变成了可点击的了。

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中用swiper轮播Loop:true时点击事件失效解决办法

原因：因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击

不念不忘少年蓝@/ 2023年06月25日 06:16/ 0 赞/ 149 阅读

相关 Vue鼠标点击事件失效解决方法

问题：再electron和vue开发的桌面应用中，为应用添加了一个拖动功能后，再拖动内部所有的鼠标事件失效，无法触发解决：因为父级元素设置了样式： -webk

女爷i/ 2023年02月14日 06:58/ 0 赞/ 8 阅读

相关 jquery点击事件失效原因和解决办法

jquery点击事件失效原因和解决办法在使用jQuery绑定点击事件的时候，有时候会遇到点击无效，这种情况大多出现在动态添加元素的时候例如：给demo里添加li元素给

亦凉/ 2023年01月11日 01:22/ 0 赞/ 328 阅读

相关 ios 上h5点击无效_ios h5 点击事件失效及点击延迟

1.ios h5 app avalon tap事件失效使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的av

悠悠/ 2022年12月31日 11:25/ 0 赞/ 607 阅读

相关 vue 点击事件失效

点击事件失效的情况，总共有三种 1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑

淡淡的烟草味﹌/ 2022年12月20日 03:14/ 0 赞/ 381 阅读

相关解决js中onscroll事件失效的办法

前言: 这几天在写界面时，想要使用onsrcoll事件，以便达到滑动到一定位置时出现想要的效果, 但是在实现过程中,并没有理想的出现该出现的效果,在网上查阅了很多办法，

浅浅的花香味﹌/ 2022年10月31日 00:38/ 0 赞/ 972 阅读

相关 iOS Safari 中点击事件失效的解决办法

问题描述当使用委托给一个元素添加`click`事件时，如果事件是委托到 `document` 或 `body` 上，并且委托的元素是默认不可点击的（如 `div`, `

忘是亡心i/ 2022年10月01日 01:51/ 0 赞/ 189 阅读

相关 Android ListView中Item点击事件失效解决方案

在平常的开发过程中，我们的ListView可能不只是简单的显示下文本或者按钮，更多的是显示复杂的布局，这样的话，我们就得自己写布局和自定义adapter了，一般是继承于Base

àì夳堔傛蜴生んèń/ 2022年08月21日 07:58/ 0 赞/ 199 阅读

相关 Vue点击事件失效

在做项目时给button添加click事件，发现没反应，但另外写了一个button添加同样的事件，却能触发。原因是使用了better-scroll，默认它会阻止touch

àì夳堔傛蜴生んèń/ 2022年05月03日 02:30/ 0 赞/ 710 阅读

相关微信公众号开发ios点击事件失效问题解决方法

在开发公众号的时候遇到了很多坑，其中困扰的最久的就是在ios中onclick事件点击失效的问题，在这里做个笔记，防止日后在犯！！！点击事件失效的环境：ios 问题描

爱被打了一巴掌/ 2022年01月17日 01:15/ 0 赞/ 831 阅读