是什么导致我的标签的事件处理程序触发两次？

Question

会发生什么：

单击复选框将代码触发一次（如预期）。 点击标签会导致代码触发两次。

代码：

function ToggleVisibility(ctl) {
  console.info($(ctl).css("background-color"));
  var backgroundColor = $(ctl).css('background-color') === 'rgb(255, 255, 255)' ? 'rgb(255, 165, 0)' : 'rgb(255, 255, 255)';
  console.info(backgroundColor);
  $(ctl).css("background-color",
    backgroundColor);
  console.info($(ctl).css("background-color"));
  console.debug($(ctl));
  console.info("****");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divTemplate">
  <label onclick="ToggleVisibility(this)" style="background-color: white;"><input type="checkbox" /><span>Checkbox item</span></label>
</div>

这是怎么回事？

Answer 1

您需要将event.preventDefault();添加到事件处理程序的开头。