Question

请查看我的代码，检查控制台，您会看到，当双击按钮时，测试功能被调用两次，有时三次！（我已经禁用了dblclick）......

我只需要召唤一次！

<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());
}

Answer 1

您可以通过添加标志变量来阻止双重函数调用：

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);
    }
}

该标志将在400ms后重置（将其更改为您想要的任何内容），因此只有第一次点击才会计数;在标志计时器重置之前，将无法处理额外的点击。

这是一个有效的例子：

＆＃13;

jQuery(document).ready(function(){
	jQuery("*").dblclick(function(e){
		e.preventDefault();
		e.stopPropagation();
	});
});

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);
    }
}

＆＃13;

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

＆＃13;

Answer 2

也不要在html标签上使用onclick，它会在每次点击时触发它。

而是走这条路：

＆＃13;

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());
}

＆＃13;

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

＆＃13;

Answer 3

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

解决方案是选择要处理事件的特定元素。如果要捕获所有双击，请在document对象上设置事件，如下所示：

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

Answer 4

如果您有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" />

Answer 5

使用.off（）

这是一个例子

jQuery(document).ready(function(){
 jQuery(document).off().on("dblclick", function(){
});   });

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

5 个答案: