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

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>

这里发生了什么？

标签： javascriptjquery

Answer 1

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