摘要:下的点击事件失效解决方法问题描述当委托给一个元素添加事件时,如果事件是委托到或上,并且委托的元素是默认不可点击的如等,此时事件会失效。
iOS下的点击事件失效解决方法 问题描述
当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。
demo:
点击我!
解决办法有6种:
将 click 事件直接绑定到目标元素(即 .target ) 上
给目标元素添加一个空的 onclick=""(
把 click 改成 touchend 或 touchstart(注意加上preventDefault)
将 click 元素委托到非 document 或 body 的父级元素上
给目标元素加一条样式规则 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)
推荐后两种。推测在 Safari 中,不可点击元素的点击事件是不会冒泡到父级元素的。通过添加 cursor: pointer; 使得元素变成了可点击的了。
补充 问题iOS系统 input 及 input内元素 cursor: pointer; 失效,使得在 iOS系统 上需要借助 cursor 属性才能生效的 click 事件无法触发
解决办法设置 font-size: 0;
把 click 改成 touchend (注意加上preventDefault)
参考文档https://github.com/facebook/react/issues/134
http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser/6472181#6472181
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82735.html
摘要:随着移动互联网的发展,移动已经逐渐成为互联网的主要入口,随之而来的是前端在移动开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结,必然不可能涉及方方面面,但会随着笔者的积累持续更新。 随着移动互联网的发展,移动Web已经逐渐成为互联网的主要入口,随之而来的是前端在移动Web开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动Web开发需要注意...
摘要:随着移动互联网的发展,移动已经逐渐成为互联网的主要入口,随之而来的是前端在移动开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结,必然不可能涉及方方面面,但会随着笔者的积累持续更新。 随着移动互联网的发展,移动Web已经逐渐成为互联网的主要入口,随之而来的是前端在移动Web开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动Web开发需要注意...
摘要:问题描述当使用委托给一个元素添加事件时,如果事件是委托到或上,并且委托的元素是默认不可点击的如等,此时事件会失效。从解决办法来看,推测在中,不可点击的元素的点击事件不会冒泡到父级元素。 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。 可...
摘要:二按照官方的提示解决了意思就是切到分支,自己的分支解决冲突,提交。这是和二相反向的操作页面标题无效的解决办法强类型转换的坑条件用正则返回的布尔值结果返回了条件结果也返回了。 2018/3/2 1,vue的{{}}怎么失效了项目使用了twig模板渲染 语法{{}}冲突,使用v-text v-html渲染 可以写表达式的写法 字符+变量 2,函数防抖节流封装实用的下拉加载更多代码demo...
阅读 3868·2021-09-10 11:22
阅读 2324·2021-09-03 10:30
阅读 3659·2019-08-30 15:55
阅读 1870·2019-08-30 15:44
阅读 839·2019-08-30 15:44
阅读 581·2019-08-30 14:04
阅读 3041·2019-08-29 17:18
阅读 1262·2019-08-29 15:04