jQuery鼠標點擊計數器 - 如何重置？

Question

我正在嘗試製作一個網站，每次用戶點擊鼠標時都會計數。我有這部分，但我還需要包括一個重置按鈕，用戶單擊它後，從0開始鼠標單擊計數器返回。

我無法弄清楚 - 如果我將var = 0文檔就緒，它重置，但點擊按鈕後，計數器永遠不會超過1.我不知道該怎麼做。

我的腳本 -

$(document).ready(function(){ 
    console.log("Here"); 


    $(document).click(function(e) { 
     $('#location').append("("+e.clientX+", "+e.clientY+")<br>"); 
    }); 

    var counter = 0; 
    $(document).click(function(e) { 
     counter++; 
     $("#mouseclick").text("Total mouse clicks: " + counter); 
    }); 

    $('button').click(function(e) { 
     e.stopPropagation(); // stop the event from propagating up the visual tree 
     $('#location').text(""); 
     $("#mouseclick").text("Total mouse clicks: 0"); 
    }); 

    $('button') 
}); 

我需要他們能夠點擊的「按鈕」和計數將重置。有什麼建議？

Answer 1

您沒有重置櫃檯。請參閱this fiddle

$(document).ready(function(){ 
    console.log("Here"); 


$(document).click(function(e) { 
    $('#location').append("("+e.clientX+", "+e.clientY+")<br>"); 
}); 

var counter = 0; 
$(document).click(function(e) { 
    counter++; 
    $("#mouseclick").text("Total mouse clicks: " + counter); 
}); 

$('button').click(function(e) { 
    e.stopPropagation(); // stop the event from propagating up the visual tree 
    $('#location').text(""); 
    counter = 0; 
    $("#mouseclick").text("Total mouse clicks: 0"); 
}); 

Answer 2

只需在$（'button'）。click（）事件中添加counter = 0即可。

$('button').click(function(e) { 
    counter=0; 
    e.stopPropagation(); // stop the event from propagating up the visual tree 
    $('#location').text(""); 
    $("#mouseclick").text("Total mouse clicks: 0"); 
});