我有两个input类型radio。每个input都有一个对应label的button内部。
我期望单击按钮与单击标签具有相同的效果:将检查相应的输入。
然而,这不会发生。如以下代码段所示,悬停并按下按钮确实会触发单选按钮中相应的样式更改,但即使简单标签按预期工作,单击操作也不会选择输入。
我已经检查过buttons 是 s 的合法孩子label。标签允许短语内容,按钮是短语内容,所以一切都应该没问题。
我还尝试向两个按钮的单击事件添加一个事件侦听器,并在其中调用event.preventDefault(),只是为了确保按钮的默认行为不会阻止事件冒泡到标签,但无济于事,标签正在接收事件。
由于这在浏览器之间似乎是一致的(在 Firefox 41a 和 Opera 31b / Chrome 44 上测试):
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<button type="button">One</button>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<button type="button">Two</button>
</label>
</div>Run Code Online (Sandbox Code Playgroud)
html ×1