Question

究竟是什么决定了输入如何集中在<label>？原则上，将广播<input>打包在<label>中可确保您可以点击标签文字的任意位置以选择单选按钮：

<label>
<input name="foo" type="radio">Fubar
</label>

但是，如果标签文本更复杂，则不起作用。下面的代码是两个单选按钮的FireBug输出，其中一个单元格悬停在文本上时有一个Bootstrap弹出窗口。

第二个按钮（Bar）是手动输入的HTML，按预期工作（单击“Bar”选择收音机）。

第一个按钮（Foo）在原始HTML中没有标签文本，<a ...>Foo</a>中的所有内容都由JavaScript插入，以提供带有标题和一些文本的弹出窗口。问题是只能通过单击按钮本身来选择此单选按钮，而不是通过单击文本来选择。类override-link只关闭链接样式（默认颜色和指针，没有装饰）。

知道如何将第一个按钮的焦点区域扩展到整个“Foo”文本吗？

<div class="radio">
  <label id="FooLabel">
    <input id="pg29Radio0" name="pg29Radio" value="0" checked="checked" type="radio">
    <a class="override-link" title="" rel="popover" data-toggle="popover"
         data-content="<div style='font-weight:normal'>
         Foo popover body text</div>"
         href="#" data-original-title="<div style='font-weight:bold; white-space:nowrap'>
         Foo popover title text</div>">
       Foo
    </a>
  </label>
</div>
<div class="radio">
  <label id="BarLabel">
    <input id="pg29Radio1" name="pg29Radio" value="1" type="radio">
    Bar
  </label>
</div>

修改

jsfiddle显示问题。这显示了两个单选按钮，当鼠标悬停在'Foo'文本上时会有一个Bootstrap弹出窗口。您可以通过单击“条形图”文本选择“条形图”广播，但不能为“Foo”执行此操作。

Answer 1

<label>元素实际上应该只包装文本（而不是输入），你应该在标签中使用for="id"（让浏览器知道这个标签是带有id="id"。
您遇到的问题是<a>元素＆＃34;接管＆＃34;来自label元素的点击。您可以使用pointer-events上的label a css属性来阻止a接管它：

＆＃13;

label a {
  pointer-events: none;
}

＆＃13;

<div class="radio">
  <input id="pg29Radio0" name="pg29Radio" value="0" checked="checked" type="radio" />
  <label for="pg29Radio0" id="FooLabel">
    <a class="override-link" title="" rel="popover" data-toggle="popover"
       data-content="<div style='font-weight:normal'>
                     Foo popover body text</div>"
       href="#" data-original-title="<div style='font-weight:bold; white-space:nowrap'>
                                     Foo popover title text</div>" onclick="this.parent.click();">
      Foo
    </a>
  </label>
</div>
<div class="radio">
  <input id="pg29Radio1" name="pg29Radio" value="1" type="radio" />
  <label for="pg29Radio1" id="BarLabel">
    Bar
  </label>
</div>

＆＃13;

请注意，如果您希望点击a打开某些模态/运行一些JavaScript代码 - 这会阻止它。

更新

由于您已经使用了javascript，因此可以使用：

 onclick="this.parentElement.click()"

在锚点上。

这是一个jsfiddle，基于你评论中的一个：
https://jsfiddle.net/2pumb4yy/2/

HTML：控制单选按钮的输入焦点

1 个答案:

更新