问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用fastclick后，label>input[type=radio]+span结构，点击文字不能够选中这个radio

头像
shannon
    27665587

    如题，图片描述，点击空白或者input可以选中，但是点击文字就不可以选中。在下正在做app的选择题的页面，所以需要这样的结构，就是点击整行都可以选中的效果，请问怎么解决？

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
    <style>
        label {
            display: block;
        }
    </style>
</head>
<body>
<label>
    <input type="radio" name="aaa" value="1">
    <span>11111</span>
</label>
<label>
    <input type="radio" name="aaa" value="2">
    <span>11111</span>
</label>
<label>
    <input type="radio" name="aaa" value="3">
    <span>11111</span>
</label>
<label>
    <input type="radio" name="aaa" value="4">
    <span>11111</span>
</label>
<label>
    <input type="radio" name="aaa" value="5">
    <span>11111</span>
</label>
<script>
    FastClick.attach(document.body);
</script>
</body>
</html>
    javascripthtml
    阅读 5.1k
    2 个回答
    得票最新
    头像
    老小王
      683
      ✓ 已被采纳

      样式上加这条可以解决：

      label > * { pointer-events: none; }

      不要问我为什么，我也不懂，实在要追究的话自己看原文
      https://github.com/ftlabs/fas...

      头像
      shannon
        27665587

        这个问题已经解决。
        结构变成了
        div>input+span
        把div设置relative z1

        input {
    appearance:none;
    left:0;
    top:0;
    right:0;
    bottom:0;
    padding:0;
    border:0;
    margin:0;
    background-color:transparent;
    z-index:10;
    width: 100%;
    height: 100%;
}

        最后通过before after伪类使用图片做好了。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题