爲什麼我的onclick處理程序被調用兩次/三次？

-1

請看我的代碼，查看控制檯，你會看到，當雙擊按鈕時，測試功能被調用兩次，有時三次！（我已禁用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()); 
}

來源

2017-04-12 edward

您可以防止雙重功能調用添加一個標誌變量：

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>

來源

2017-04-12 19:49:39 freginold

問題的事實，在設置上的所有DOM元素這雙擊事件處理程序（「*」）和事件氣泡造成的。有關冒泡的詳細信息，請參閱this。此外，您的圖像使用click事件處理程序進行設置，因此如果您雙擊圖像，您將觸發點擊和雙擊事件。

解決方案是挑選您想要處理事件的特定元素。如果你想捕獲所有雙擊，建立document對象像這樣的事件：

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

來源

2017-04-12 19:44:03

我更新了的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" />

來源

2017-04-12 19:45:23

不要在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>

來源

2017-04-12 19:49:53 Syden

爲什麼我的onclick處理程序被調用兩次/三次？

回答

相關問題