javascript - 为什么嵌套在标签中的 Span 会阻止其他嵌套项目单击以选择复选框？

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>里面。但是，单击object.name输出到 DOM 的方法不起作用 - 只能单击 <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() 来处理其他一些行为的点击事件。只需删除它..