为什么嵌套在 Label 中的 Span 会阻止其他嵌套项单击 select 复选框的能力？

Question

模板非常简单，一个复选框组件和嵌套在标签元素中的文本字符串：

<label class="statusList-label">
  {{list-checkbox
    value=object.id
    sourceList=item.objectIds
    class=""}}
  {{object.name}}
</label>

嵌套在里面的复选框模板如下所示：

<span>
  <input type="checkbox" class="u-display-none">
  <i class="fa fa-fw fa-lg {{if checked 'fa-check-square' 'fa-square-
  o'}}
  fa-checkbox {{if disabled 'disabled'}}" unselectable="on">
  </i>
</span>

现在，预期的行为是单击嵌套在 <label> 标记内的任何内容应该切换内部的 <input>。但是，单击输出到 DOM 的 object.name 不起作用 - 只有单击 <span> 内的项目才有效。感谢任何帮助。

编辑：这是 HTML 输出：

<div class="item">
  <label class="itemLabel">
    <span unselectable="on" id="ember1173" class="cell cell--checkbox ember-view">
      <input type="checkbox" class="u-display-none">
      <i unselectable="on" class="fa fa-fw fa-lg fa-check-square fa-checkbox "></i>
      <!---->
    </span>
    Some Text Here
  </label>
</div>

编辑 2：弄清楚了.. 父组件上有 preventDefault 来处理一些其他行为的点击事件。只需要删除它..

Answer 1

想通了.. 父组件上有 preventDefault() 来处理一些其他行为的点击事件。只需要删除它..

为什么嵌套在 Label 中的 Span 会阻止其他嵌套项单击 select 复选框的能力？

Why is the Span that's nested in a Label preventing other nested items' ability to click to select checkbox?

html

javascript

checkbox

label

ember.js