摘要:问题描述当使用委托给一个元素添加事件时,如果事件是委托到或上,并且委托的元素是默认不可点击的如等,此时事件会失效。从解决办法来看,推测在中,不可点击的元素的点击事件不会冒泡到父级元素。
问题描述
当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。
可以使用下面的代码在 iOS 中进行测试。
解决办法iOS click bug test Click Me!
解决办法有 4 种可供选择:
将 click 事件直接绑定到目标元素(即 .target)上
将 click 事件委托到非 document 或 body 的父级元素上
给目标元素加一条样式规则 cursor: pointer;
推荐后两种。从解决办法来看,推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112970.html
摘要:下的点击事件失效解决方法问题描述当委托给一个元素添加事件时,如果事件是委托到或上,并且委托的元素是默认不可点击的如等,此时事件会失效。 iOS下的点击事件失效解决方法 问题描述 当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。 demo: ...
摘要:二分析排查一步骤一使用搜索引擎我是在无意中发现该问题的,当时观察到的现象是绑定在上的事件有时会被触发,有时会失效。这说明并不存在偶尔失效的问题。也就是说,我需要找到确切的令响应事件失效的原因。接下来的事很简单,继续搜索事件在页面滚动后失效。 如果你关注我应该知道,我最近对PC端页面进行移动适配。在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户...
摘要:二分析排查一步骤一使用搜索引擎我是在无意中发现该问题的,当时观察到的现象是绑定在上的事件有时会被触发,有时会失效。这说明并不存在偶尔失效的问题。也就是说,我需要找到确切的令响应事件失效的原因。接下来的事很简单,继续搜索事件在页面滚动后失效。 如果你关注我应该知道,我最近对PC端页面进行移动适配。在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户...
摘要:随着移动互联网的发展,移动已经逐渐成为互联网的主要入口,随之而来的是前端在移动开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结,必然不可能涉及方方面面,但会随着笔者的积累持续更新。 随着移动互联网的发展,移动Web已经逐渐成为互联网的主要入口,随之而来的是前端在移动Web开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动Web开发需要注意...
阅读 3488·2021-11-25 09:43
阅读 1244·2021-09-08 09:45
阅读 2623·2021-09-07 09:59
阅读 1451·2021-08-09 13:45
阅读 3289·2019-08-30 15:54
阅读 656·2019-08-29 18:35
阅读 475·2019-08-29 17:18
阅读 974·2019-08-29 14:10