标签内的按钮答案

【问题标题】：Button inside a label标签内的按钮
【发布时间】：2016-09-27 00:39:21
【问题描述】：

我有一个带有“for="the pointer to the checkbox input"”的label，据我所知，这个for 只能为label 添加。因此，我需要在label 内部添加一个<button>（我需要它），但是单击事件无法正常工作-它没有选中for 指向的复选框。

如果我必须将<button> 放在label 中，我可以在这里使用哪些可能性，只有 html+css 编码？

一些代码例如：

<input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>

【问题讨论】：

所以实际的问题是，如何通过单击按钮来切换复选框？我不知道该问题的非 JS 答案。它可能不起作用，因为按钮自己捕获点击并且根本不将其传递给标签。我确实想知道为什么你首先想要这个。对我来说，这听起来像是非常令人困惑的 UX。如果您确实想继续，可以考虑将元素样式设置为类似按钮的外观。
是的，我只是想尽可能多地提供信息
请提供你的代码，以及为什么你需要一个label 包装一个button ？
你不能<label onclick="function()" style="cursor:pointer">吗？
这里不需要我的代码。如果你愿意，我会发布带有标签和按钮的输入，但我认为它没用。

标签： html css button radio-button

【解决方案1】：

您可以使用覆盖复选框和按钮本身的透明伪元素来捕获鼠标事件。

这是一个例子：

html:

<label>
  <input type="checkbox">
  <button class="disable">button</button>
</label>

css:

.disable{pointer-events:fill}
label{position:relative}
label:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

【讨论】：

我知道你的意思朋友，即使你的代码有点错误，但我想到了这个想法。不太好，我需要点击<button>。
我认为这不可能是您当时想要做的。在单击时触发两个事件（标签单击事件和按钮单击事件）。它是其中之一。在这种情况下，您必须使用 javascript。

【解决方案2】：

事实证明，您可以让<button> 操作输入，但前提是您将<label> 放入 <button>。

<button type="button">
  <label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">

虽然这违反了 W3C 规范：

交互式元素标签不得作为按钮元素的后代出现。 https://www.w3.org/TR/html-markup/label.html

【讨论】：

这个问题是如果你点击按钮而不是文本，标签不会触发点击。
我认为，如果你喜欢在按钮内粘贴标签，你应该准备好需要一些 CSS ;)
这不适用于键盘 - 按下按钮没有任何作用。
@epascarello 这只是标签触发区域的问题。例如，您可以设置按钮 {position: relative;} 和标签的伪元素，如 label::after { content: '';位置：绝对；宽度：100%；高度：100%； } 来扩展该区域。

【解决方案3】：

HTML：

<label for="whatev"
       onclick="onClickHandler">
    <button>Imma button, I prevent things</button>
</label>

JS：

const onClickHandler = (e) => {
    if(e.target!==e.currentTarget) e.currentTarget.click()
}

Target 为点击目标，本例中 currentTarget 为标签。

如果没有 if 语句，如果在事件阻止区域之外单击，则会触发两次事件。

未跨浏览器测试。

【讨论】：

【解决方案4】：

最好的解决方案是将样式设置为按钮。

如果您使用的是 CSS 框架，例如 bootstrap，您可以提供标签类，例如 btn 和 btn-default。这会将其样式设置为按钮。您可能需要手动调整行高的 css 属性，如下所示：

label.btn {
    line-height: 1.75em;
}

然后，要将点击样式作为按钮获取，请添加以下样式：

input[type=radio]:checked ~ label.btn {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}

这将接受检查的输入，并给出 dom 中具有 btn 类的下一个标签元素，引导 btn-default 按钮单击样式。根据需要调整颜色。

【讨论】：

【解决方案5】：

我所做的如下：

<label htmlFor="fileUpload">
  <button onclick="onButtonClick">upload</button>
</label>
<input id="fileUpload" type="file" style="display: none"/>

onButtonClick() {
  document.getElementById('fileUpload').click();
}

【讨论】：

这段代码是如何解决问题的？你能解释一下吗？

【解决方案6】：

你可以这样做：

<label>
 <button></button>
</label>

CSS

label {
    cursor: pointer; // not necessary but probably a good idea.
    display: block; // depending on your structure.
}
button {
    pointer-events: none;
}

标签上的display: block 仅是必需的，以便标签的边界框完全封装其子项（本例中为按钮）。

【讨论】：