为什么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

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

但是，单击标签也会自动向相关的输入元素发送单击事件，因此将其视为单击复选框。然后事件冒泡导致在包含元素（即标签）上触发click事件，因此您的处理程序将再次运行。

将复选框放在标签之外，如此

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

UPDATE ：您也可以像@Rejith R Krishnan所建议的那样，并在复选框上设置点击事件处理程序，而不是标签

Answer 2

只需定义目标元素类型，这将正常工作

＆＃13;

＆＃13;

$('label.add-to-favourite').click(function(e){

 if(e.target.type=='checkbox'){
     alert("here");
     $(this).toggleClass('active');
   }

});

＆＃13;

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


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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以尝试以下代码：

$('label.add-to-favourite').click(function(e){
    e.preventDefault();
    var $check = $(':checkbox', this);
    $check.prop('checked', !$check.prop('checked'));
    alert("here");
    $(this).toggleClass('active');
});

它会添加类并检查复选框。

示例：https://jsfiddle.net/Mindaugas/71sefdhp/

Answer 4

删除点击的绑定，并将change事件绑定添加到checkbox。

＆＃13;

＆＃13;

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

＆＃13;

.add-to-favourite span{
    cursor: pointer;
    color: #d2d6de;
}
.add-to-favourite:hover span, .add-to-favourite.active span {
    color: #CB3D3D;
}
.hide{display:none;}

＆＃13;

<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" class="hide" 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" class="hide" name="favourites[]" value="2">
    </label>
  </li>
</ul>

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

这是事件传播的情况。试试这个

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

Answer 6

  

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

好吧，我会说label元素是checkbox的父元素，所以它们之间存在联系。当您单击标签时，也会单击复选框上的复选框，并且事件会冒泡，因此会导致两个警报。

从标签中取出复选框或相同，然后只能通过css实现。

结构变化很小的例子。

＆＃13;

＆＃13;

$('label.add-to-favourite').click(function(e) {
  alert("here");
  $(this).toggleClass('active').siblings(':checkbox').prop('checked', $(this).hasClass('active'))
});

＆＃13;

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

＆＃13;

<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>
    </label>
    <input type="checkbox" name="favourites[]" value="1">

  </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>
    </label>
    <input type="checkbox" name="favourites[]" value="2">

  </li>
</ul>

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

＆＃13;

＆＃13;

＆＃13;

仅限CSS的解决方案。

＆＃13;

＆＃13;

li{overflow:auto;}
.add-to-favourite span {
  cursor: pointer;
  color: #d2d6de;
  float:left;
}
.add-to-favourite input[type="checkbox"]{
    margin-top:15px;
}
.add-to-favourite:hover span,
.add-to-favourite input[type="checkbox"]:checked + span{
  color: #CB3D3D;
}

＆＃13;

<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">
      <input type="checkbox" name="favourites[]" value="1">
      <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>
    </label>
  </li>
  <li>
    <label class="add-to-favourite">
      <input type="checkbox" name="favourites[]" value="2">
      <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>
    </label>
  </li>
</ul>

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

同时删除警报。

ZeroMQ