为什么我的onclick处理程序被调用两次/三次？

问题描述：

请看我的代码，查看控制台，你会看到，当双击按钮时，测试功能被调用两次，有时三次！（我已禁用dblclick）...为什么我的onclick处理程序被调用两次/三次？

我需要它只被调用一次！

<img onclick="test(1, 2, 3)" src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" /> 

jQuery(document).ready(function(){ 
    jQuery("*").dblclick(function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    }); 
}); 

function test(a, b, c) { 
    console.log('test clicked - ' + arguments.callee.caller.toString()); 
}

答

您可以防止双重功能调用添加一个标志变量：

var flag = false; 

function test(a, b, c) { 
    if (!flag) { 
     console.log('test clicked - ' + arguments.callee.caller.toString()); 
     flag = true; 
     setTimeout(function(){ flag = false; }, 400); 
    } 
}

标志将重置后400毫秒（将其更改为任何你想要的），因此只第一次点击会计数;在标志定时器重置之前，不会处理额外的点击。

这里是一个工作示例：

jQuery(document).ready(function(){ 
 
\t jQuery("*").dblclick(function(e){ 
 
\t \t e.preventDefault(); 
 
\t \t e.stopPropagation(); 
 
\t }); 
 
}); 
 

 
var flag = false; 
 

 
function test(a, b, c) { 
 
    if (!flag) { 
 
     console.log('test clicked - ' + arguments.callee.caller.toString()); 
 
     flag = true; 
 
     setTimeout(function(){ flag = false; }, 400); 
 
    } 
 
}

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

 
<div> 
 
<img onclick="test(1, 2, 3)" src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" /> 
 
</div>

答

问题的事实，在设置上的所有DOM元素这双击事件处理程序（“*”）和事件气泡造成的。有关冒泡的详细信息，请参阅this。此外，您的图像使用click事件处理程序进行设置，因此如果您双击图像，您将触发点击和双击事件。

解决方案是挑选您想要处理事件的特定元素。如果你想捕获所有双击，建立document对象像这样的事件：

jQuery(document).ready(function(){ 
    jQuery(document).on("dblclick", function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    }); 
});

我更新了的jsfiddle - 测试仍称两次，有时三次 – edward

为什么向下票呢？这是正确的答案。 –

查看我的评论以上 – edward

答

，如果您有jQuery的可用，您可以使用.one()方法，以确保事件只被触发一次： http://api.jquery.com/one/

然后，您可以避免必须防止双击。

jQuery(document).ready(function(){ 
 
    jQuery("img").one('click', function(e){ 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
     test(1,2,3) 
 
    }); 
 
}); 
 

 
function test(a, b, c) { 
 
    console.log('test clicked - ' + arguments.callee.caller.toString()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" />

答

不要在HTML标记使用onclick为好，它会触发它的每一次点击。

而是走这条路线：

jQuery(document).ready(function() { 
 
    jQuery("img").one("click", function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    test(1, 2, 3); 
 
    }); 
 
}); 
 

 
function test(a, b, c) { 
 
    console.log('test clicked - ' + arguments.callee.caller.toString()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" /> 
 
</div>

为什么我的onclick处理程序被调用两次/三次？

相关推荐