但是,这不会发生.如下面的代码片段所示,悬停并按下按钮会触发单选按钮中相应的样式更改,但即使简单标签按预期工作,单击操作也不会选择输入.
我已经检查过按钮是标签的合法子女. Labels允许短语内容,按钮是Phrasing Content,所以一切都应该没问题.
我还尝试向两个按钮的click事件添加一个事件监听器,并在其中调用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>
解决方法
你有一个按钮,它是你的标签的后代;对此的预期解释是标签用作按钮的标签.但是,您尝试将单选按钮(而不是按钮元素)与标签相关联.这里真正的问题是表单控件和标签之间存在冲突;它无法确定它应该与哪个控件相关联.
我猜测单选按钮不能正常工作这一事实的副作用.也许这取决于单选按钮和按钮元素中的某些激活行为.
I’ve checked that
buttons are legal children oflabels. Labels allow Phrasing Content,and buttons are Phrasing Content,so everything should be okay there.
Error: Any
buttondescendant of alabelelement with aforattribute must have an ID value that matches thatforattribute.
这是因为具有for属性的label元素需要具有表单控件,该表单控件具有指向for属性的ID值,即使该控件是标签本身的后代也是如此.但是您不能将相同的ID分配给多个元素.结果是上述冲突.>如果你不想知道你想要在这里完成什么,如果你只是希望标签具有按钮的外观,那么我给出的最佳建议就是如此设计它.
