当标签只有一个按钮时,点击按钮不会(完全)触发标签 [英] When a label only has a button, a button click does not (fully?) trigger the label
问题描述
我有两个类型为
。对于每一个 radio
的输入输入
,都有一个相应的标签
,并带有一个按钮
里面。
我期待点击按钮的效果与点击标签相同:相应的输入将被检查。
然而,这不会发生。如下面的片段所示,悬停和按下按钮确实会触发单选按钮中相应的样式更改,但即使简单标签按预期工作,单击操作也不会选择输入。
我检查过按钮
s是 label
s的合法子项。 标签允许表情内容,并且按钮短语内容,所以一切都应该没问题。
我也尝试为两个按钮的点击事件添加一个事件侦听器,并在其中调用 event.preventDefault()
,只是为了确保按钮的默认行为不会阻止事件冒泡到标签,但无济于事,标签正在接收事件。
<由于这在浏览器中是一致的(在Firefox 41a和Opera 31b / Chrome 44上测试过):
- 这里发生了什么,我'缺少了什么?
- 我怎样才能在没有欺骗的情况下实现这一点(比如将标签作为按钮样式)?
< div> < input type =radioname =Aid =one/> < label for =one>一个< / label> < label for =one> <按钮类型=按钮>一个< /按钮> < /标签> < input type =radioname =Aid =two/> < label for =two>两个< / label> < label for =two> <按钮类型=按钮>两个< /按钮> < / label>< / div>
-
标签一次只能与一个窗体控件关联。这可以通过以下事实得到证明:属性的
指向具有匹配ID属性的元素。
您有一个
按钮
,它是标签的后代。对此的预期解释是, 标签
用作按钮
的标签。但是,您试图将单选按钮而不是按钮
元素与标签$ c相关联$ C>。这里真正的问题是表单控件和
标签
之间存在冲突;它无法找出它应该与哪个控件相关联。
我猜测单选按钮无法正常工作的一个副作用是。也许这归功于单选按钮和
按钮
元素中的一些激活行为。
我检查过
按钮
是label s的合法子项。标签允许Phrasing内容,而按钮是Phrasing内容,所以一切都应该没问题。
验证程序不会产生以下错误您的标记:
错误:任何
按钮
后裔对于属性,标签
元素的元素必须具有与
匹配的
属性。
这是因为
标签
元素为属性 needs 设置以使用
的ID值为
属性指向,即使该控件是标签
本身的后代。但是你不能将同一个ID分配给多个元素。结果是前面提到的冲突。 如果您不知道自己想要完成什么, $ c> label 来让按钮的外观就像这样。
I have two input
s of type radio
. For each input
there's a correspoding label
with a single button
inside.
I was expecting that clicking the button would have the same effect as clicking the label: that the corresponding input would be checked.
However, this does not happen. As shown by the following snippet, hovering and pressing the buttons does trigger the corresponding style changes in the radio buttons, but the click action does not select the input, even though the simple labels work as expected.
I've checked that button
s are legal children of label
s. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
I have also tried to add an event listener to both buttons' click events, and within them calling event.preventDefault()
, just to make sure that the default behaviour of the button was not preventing the event from bubbling up to the label, but to no avail, the label is receiving the event.
Since this seems to be consistent across browsers (Tested on Firefox 41a and Opera 31b / Chrome 44):
- What's happening here that I'm missing?
- How can I implement this without trickery (such as styling the label as if it were a button)?
<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>
A
label
can only be associated with one form control at a time. This is evidenced by the fact that thefor
attribute points to an element with a matching ID attribute.You have a
button
that is a descendant of yourlabel
; the expected interpretation of this is that thelabel
serves as a label for thebutton
. However, you're trying to associate the radio button, not thebutton
element, with thelabel
. The real problem here is that there is a conflict between the form controls and thelabel
; it's unable to figure out which control it's supposed to be associated to.I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the
button
element.I've checked that
button
s are legal children oflabel
s. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.The validator does nevertheless produce the following error with your markup:
Error: Any
button
descendant of alabel
element with afor
attribute must have an ID value that matches thatfor
attribute.This is because a
label
element with afor
attribute needs to have a form control with that ID value for thefor
attribute to point to, even if that control is a descendant of thelabel
itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.Without knowing what you're trying to accomplish here, the best advice I can give if you just want the
label
to have the appearance of a button is to just style it as such.
这篇关于当标签只有一个按钮时,点击按钮不会(完全)触发标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!