资讯专栏INFORMATION COLUMN

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

王笑朝 / 973人阅读

摘要:问题描述当使用委托给一个元素添加事件时,如果事件是委托到或上,并且委托的元素是默认不可点击的如等,此时事件会失效。从解决办法来看,推测在中,不可点击的元素的点击事件不会冒泡到父级元素。

问题描述

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

可以使用下面的代码在 iOS 中进行测试。

 
 
 
    
    
    iOS click bug test
    
 
 
    
Click Me!
解决办法

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

​将 click 事件直接绑定到目标​元素(​​即 .target)上

将目标​元素换成 或者 button 等可点击的​元素

将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上

给​目标元素加一条样式规则 cursor: pointer;

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112970.html

相关文章

  • iOS点击事件失效解决方法

    摘要:下的点击事件失效解决方法问题描述当委托给一个元素添加事件时,如果事件是委托到或上,并且委托的元素是默认不可点击的如等,此时事件会失效。 iOS下的点击事件失效解决方法 问题描述 当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。 demo: ...

    aaron 评论0 收藏0
  • 我是如何通过debug成功甩锅浏览器解决fixed定位元素,在页面滚动后touch事件失效问题

    摘要:二分析排查一步骤一使用搜索引擎我是在无意中发现该问题的,当时观察到的现象是绑定在上的事件有时会被触发,有时会失效。这说明并不存在偶尔失效的问题。也就是说,我需要找到确切的令响应事件失效的原因。接下来的事很简单,继续搜索事件在页面滚动后失效。 如果你关注我应该知道,我最近对PC端页面进行移动适配。在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户...

    tulayang 评论0 收藏0
  • 我是如何通过debug成功甩锅浏览器解决fixed定位元素,在页面滚动后touch事件失效问题

    摘要:二分析排查一步骤一使用搜索引擎我是在无意中发现该问题的,当时观察到的现象是绑定在上的事件有时会被触发,有时会失效。这说明并不存在偶尔失效的问题。也就是说,我需要找到确切的令响应事件失效的原因。接下来的事很简单,继续搜索事件在页面滚动后失效。 如果你关注我应该知道,我最近对PC端页面进行移动适配。在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户...

    JowayYoung 评论0 收藏0
  • 第六天 移动端Web开发注意事项

    摘要:随着移动互联网的发展,移动已经逐渐成为互联网的主要入口,随之而来的是前端在移动开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结,必然不可能涉及方方面面,但会随着笔者的积累持续更新。 随着移动互联网的发展,移动Web已经逐渐成为互联网的主要入口,随之而来的是前端在移动Web开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动Web开发需要注意...

    妤锋シ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<