javascript - 为什么 onclick 会被触发两次？

Question

这是我一直在研究的一小段代码:

我想要的只是添加一个 active 类以在单击同一元素时添加标签，并保持默认行为不变。

不知道为什么点击事件被触发了两次？？

$('label.add-to-favourite').click(function(e){
  alert("here");
  $(this).toggleClass('active');
});

.add-to-favourite span{
    cursor: pointer;
    color: #d2d6de;
}


.add-to-favourite:hover span, .add-to-favourite.active span {
    color: #CB3D3D;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<ul>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
      <input type="checkbox" name="favourites[]" value="1">
    </label>
  </li>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
      <input type="checkbox" name="favourites[]" value="2">
    </label>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

当您点击标签时，它会触发复选框的点击事件。

但点击标签也会自动向关联的输入元素发送点击事件，因此这被视为点击复选框。然后事件冒泡导致在包含元素(即标签)上触发点击事件，因此您的处理程序再次运行。

像这样把复选框放在标签外面

<label></label>
<input type="checkbox">

更新:您也可以按照@Rejith R Krishnan 的建议，在复选框而非标签上设置点击事件处理程序