ios中单选框点击无效

1 问题

1.1 今天做移动端开发,发现ios点击单选框有时候有效,有时候无效

2 原因

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

3 解决办法

3.1 将事件注册在DOM上,如:element.addEventListener(event, function, useCapture);
3.2 将目标元素换成 <a> 或者 <button> 等可点击的元素
3.3 给目标元素添加一个空的 onclick=""
(<div class="target" onclick="">点击我!)
3.4 把 click 改成 touchend 或 touchstart(注意加上preventDefault)
3.5 将 click 元素委托到非 document 或 body 的父级元素上
3.6 给目标元素加一条样式规则 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)
3.7 模拟制作一个样式相仿的单选框

4 总结

推荐使用3.7方式

posted @ 2022-05-23 19:53  不叫一日闲过  阅读(187)  评论(0编辑  收藏  举报