Question

我想用jQuery计算鼠标点击页面的任何位置。

如果用户在5秒内点击了10次以上，我想发一条消息。

时间计数器将在每次最后一次点击时检查已用时间。

我将使用此代码来防止网站上出现不必要的网络流量。因为，我在页面上有一个日历;每次点击日历都会从服务器获取太多数据（事件/新闻列表）。如果用户点击太多，可能会阻止我的网站。

Answer 1

鼠标点击（传播停止的点击除外）正在冒泡，因此您只需在document.body上收听实时点击。

然后，你应该保留一个数组，在那里存储最后10个点击时间戳（当长度为10时，只需在推送新的之前删除第一个）。检查第一个和最后一个时间戳delta，就是这样。

Answer 2

怎么样：

$(document).ready(function () {

  var amountOfClicks = 0;
  window.setInterval("resetClicks()", 5000);


  $('body').click(function(){
     amountOfClicks++;
     if(amountOfClicks > 10){
alert('You clicked more than 10 times the last 5 seconds');
resetClicks();
}
  });

});

function resetClicks(){
  amountOfClicks = 0;
}

Answer 3

你可以这样做：

var numberOfClicks= [];

$(document).click(function(e){
    if(numberOfClicks.length < 10){
       numberOfClicks.push(new Date().getTime());
    }else{
        var diff = numberOfClicks[numberOfClicks.length -1] - numberOfClicks[0];
        console.log(diff);
        if(diff < 5000){
            //alert("toomany!");
            e.preventDefault();
         }
        numberOfClicks.shift();
        numberOfClicks.push(new Date().getTime());     
        console.log(numberOfClicks);
    }
});

在此处http://jsfiddle.net/WWpqZ/

编辑 - 此代码不会考虑您花在观看提醒上并点击确定

的时间

var numberOfClicks= [];
alertTime = 0;
$(document).click(function(){
    if(numberOfClicks.length < 10){
       numberOfClicks.push(new Date().getTime());
    }else{

        var diff = numberOfClicks[numberOfClicks.length -1] - numberOfClicks[0] - alertTime;

        if(diff < 5000){
            var beforeAlert = new Date().getTime();
            alert("toomany!");
            var afterAlert = new Date().getTime();
            alertTime = afterAlert - beforeAlert;
         }
        numberOfClicks.shift();
        numberOfClicks.push(new Date().getTime());     

    }
});

在这里摆弄http://jsfiddle.net/WWpqZ/1/

Answer 4

这是我的“改进版”：

var tOuts = [];
$(document).click(function(){
    tOuts.push( setTimeout(function(){
        tOuts.shift();
    }, 5000) );

    if (tOuts.length == 10) {
        // clear all the timeouts
        for (x in tOuts) { clearTimeout(tOuts[x]); }
        tOuts = [];
        callback();
    }
});


callback = function(){
    alert('you have clicked 10 times within 5 seconds');
}

它的作用是：

对于页面上的每次单击，它会向tOuts数组添加超时。自点击以来已经过了5秒 - 正在删除数组中的元素，所以数组中元素的数量是用户自上次点击以来5秒间隔内的总点击次数。

在计数达到10之后，所有超时都被清除并且正在执行回调，因此为了再次执行回调 - 用户将不得不再次点击10次。

jsFiddle Example

Answer 5

在普通JavaScript中：

// Click listener
document.addEventListener("click", clickListener, false);
var counting = 0,
    clicks = 1;
function clickListener(e) {
    // Count the number of clicks
    clicks++;
    if (!counting) {
        counting = 1;
        setTimeout(function() {
            if (clicks > 9) {
                alert('Multiple clicks! ('+clicks+')');
            }
            counting = 0;
            clicks = 0;
        }, 5000);
    }
}

如何在5秒内检测点击次数

5 个答案: