jQuery点击事件触发两次？答案

【问题标题】：jQuery click event firing twice?jQuery点击事件触发两次？
【发布时间】：2014-02-02 22:40:13
【问题描述】：

这是一个相当奇怪的案例，您可以在此处查看代码：

【问题讨论】：

【解决方案1】：

您不应该使用 label 元素来包装 input 元素，试试这个：

<label for="average-data" class="section-view-time-checkbox">
    <span class="custom checkbox checked"></span> Average  
</label>
<input type="checkbox" id="average-data" style="display: none;">

http://jsfiddle.net/zpZtH/7/

【讨论】：

刚刚摆脱了这一切。真的不需要它，因为我没有提交表格。仅利用一些 CSS 样式。

【解决方案2】：

http://jsfiddle.net/Cc55g/

您需要在点击处理程序中调用event.preventDefault()。这可以防止在您的自定义函数运行后执行默认的单击操作。第二个警报正在发生，因为正在提交表单。

【讨论】：

为什么要提交表单？这只是一个label？另外，我不想做event.preventDefault() 的原因是我偶尔也会在标签中嵌入指向另一个页面的链接。
我真的不知道。输入元素的默认点击行为显然会改变元素的状态，导致它以某种方式刷新。没关系，因为你知道你想要它做什么，你可以让它避免其他行为；不过我自己很好奇，如果我遇到一个好的解释，我会在这里发帖
您可以将不同的点击侦听器绑定到锚链接并在该侦听器中调用event.stopPropagation() 以防止在其父元素上触发点击。然后它将执行其默认的重定向/更改哈希操作，仅此而已

【解决方案3】：

这是 Javascript 中的常见错误。你可以在互联网上找到很多关于 SO 的文章，特别是关于事件被触发两次。你可以试试这样的

 $(document).on('click', '#task-list li', function(e)
 {
       alert('Hellow world');
       e.stopPropagation();
       return false;
 });

这绝对是 Javascript 问题，因为如果您点击 google 并搜索 event fire 两次，您会看到 Angular、Jquery 和 Backbone 等都在某处触发了两次甚至三次事件。所以，这似乎是它背后的javascript。当然，如果您使用 Mozilla Developers Network 搜索此内容，您会发现专家也这么说。

【讨论】：