Javascript 如何防止前4次单击的默认链接单击行为

我有一个指向外部url的链接点。我想归档的是，在前4次单击时不要重定向到链接，而是在第5次单击时重定向到链接

我知道我可以用

e.preventDefault（）

以防止发生重定向，但问题是如何在第五次单击时恢复正常行为？（转到指定的链接）

我创建了一个简单的代码片段来演示我想要完成的任务

$（'a'）。单击（函数（e）{console.log（'event captured'）；}）
在一个闭包中，可以有一个变量跟踪它被单击的时间

例如：

node.addEventListener("click", (function () {

    let nbOfClicks = 0;

    return function (e) {
        if (nbOfClicks < 4) {
              nbOfClicks = nbOfClicks + 1;
              e.preventDeault();
              //do stuff
        } else {
              // do not prevent click, do stuff
        }
    };    

} ()), false);

最终，您将获得更通用的版本：

$("a").each(function () {

   this.addEventListener("click", (function () {

       let nbOfClicks = 0;

        return function (e) {
            nbOfClicks = nbOfClicks + 1;
            let {unbindEvent, redirect} = handleClick(nbOfClicks, e);

            if (unbindEvent === true) {
                 // do stuff
            }

            if (redirect === true) {
                 // do stuff
            }
         };    

    } ()), false);

});

从阅读评论来看，你想要的似乎是一个去盎司，在这种情况下，如果我们拿第二个例子来说

$("a").each(function () {

   this.addEventListener("click", (function () {

       let lastClickStamp = 0;

        return function (e) {
            if (lastClickStamp === 0) { 
                // first click ever
                // or since a long period of time
                lastClickStamp = e.timeStamp;

                // trigger your httprequest
             } else {
                let diff = e.timeStamp - lastClickStamp;
                if (diff > threshold) { 
                    // threshold is your debouncing value,
                    // which sets the rate at which your events
                    // wil be processed

                    // here you exceed the threshold so you can take 
                    // action, but you need to update the last time 
                    // your function was called

                    lastClickStamp = e.timeStamp;


                } else { 
                    // you called the function before enough 
                    //time elapsed 
                    // so you do nothing 
                }
             }
         };    

    } ()), false);

});

为了便于参考，我建议查看lodash.debounce函数，并在RxJS（或xstream，most.js…）之类的库中查找更高级的可观察对象和debounce操作符

还有油门操作，你可以看看（在洛达斯和观测）

请询问您是否需要更多详细信息

结论是：使用JS闭包的强大功能
 在闭包中，可以有一个变量跟踪它被单击的时间

例如：

node.addEventListener("click", (function () {

    let nbOfClicks = 0;

    return function (e) {
        if (nbOfClicks < 4) {
              nbOfClicks = nbOfClicks + 1;
              e.preventDeault();
              //do stuff
        } else {
              // do not prevent click, do stuff
        }
    };    

} ()), false);

最终，您将获得更通用的版本：

$("a").each(function () {

   this.addEventListener("click", (function () {

       let nbOfClicks = 0;

        return function (e) {
            nbOfClicks = nbOfClicks + 1;
            let {unbindEvent, redirect} = handleClick(nbOfClicks, e);

            if (unbindEvent === true) {
                 // do stuff
            }

            if (redirect === true) {
                 // do stuff
            }
         };    

    } ()), false);

});

从阅读评论来看，你想要的似乎是一个去盎司，在这种情况下，如果我们拿第二个例子来说

$("a").each(function () {

   this.addEventListener("click", (function () {

       let lastClickStamp = 0;

        return function (e) {
            if (lastClickStamp === 0) { 
                // first click ever
                // or since a long period of time
                lastClickStamp = e.timeStamp;

                // trigger your httprequest
             } else {
                let diff = e.timeStamp - lastClickStamp;
                if (diff > threshold) { 
                    // threshold is your debouncing value,
                    // which sets the rate at which your events
                    // wil be processed

                    // here you exceed the threshold so you can take 
                    // action, but you need to update the last time 
                    // your function was called

                    lastClickStamp = e.timeStamp;


                } else { 
                    // you called the function before enough 
                    //time elapsed 
                    // so you do nothing 
                }
             }
         };    

    } ()), false);

});

为了便于参考，我建议查看lodash.debounce函数，并在RxJS（或xstream，most.js…）之类的库中查找更高级的可观察对象和debounce操作符

还有油门操作，你可以看看（在洛达斯和观测）

请询问您是否需要更多详细信息

结论是：使用JS闭包的强大功能
 您可以计算点击次数，然后解除事件绑定。例如：

var click_count = 0;
$('.myelement').bind('click', function(e) {
    e.preventDefault();
    ++click_count;

    if (click_count === 4) {
        $(this).unbind('click');
    }
});

您可以计算点击次数，然后解除事件绑定。例如：

var click_count = 0;
$('.myelement').bind('click', function(e) {
    e.preventDefault();
    ++click_count;

    if (click_count === 4) {
        $(this).unbind('click');
    }
});


$（'a'）。单击（函数（e）{
var times=parseInt（$（this）.data（“times”）；
如果（isNaN（次））次=0；
时代++；
$（此）.data（“times”，times）
console.log（'捕获事件'，次数）；
如果（次数
$（'a'）。单击（函数（e）{
var times=parseInt（$（this）.data（“times”）；
如果（isNaN（次））次=0；
时代++；
$（此）.data（“times”，times）
console.log（'捕获事件'，次数）；
如果（timescache在回调处理程序外的单击次数，如果
length
低于您的限制，则只调用
preventDefault
，如果
length
低于您的限制，则只调用
preventDefault
谢谢。接下来的一个问题是，如果链接被点击多次，但我只想去链接一次？让我澄清一下，我不想在第五次点击时去链接，我想检测用户是否多次点击链接，如果是，只在使用停止点击后去链接一次这不是你的问题所说的。那么当我不点击时，我到底能做什么，不能做什么o你的站点？单击一次是不够的，还是不够？它会转到站点，但如果多次单击链接，我只想触发一个http请求。你想要的是一个去盎司，我会更新我的答案。谢谢，这应该可以。接下来的一个问题是，如果多次单击链接，但我只想转到链接一次，会怎么样？让我来回答c拉里菲，我不想在第五次点击时进入链接，我想检测用户是否多次点击该链接，如果是，在使用停止点击后只进入链接一次。这不是你的问题所说的。那么，当我进入你的网站时，我能做什么，我不能做什么？点击一次是不够的，是吗？它会进入该网站，但如果I每次点击链接时，我只想触发一个http请求。你想要的是一个去Bounce，我会更新我的答案。感谢你用代码示例进行的简洁完整的解释，这绝对是一个困扰的答案！我查看了lodash去Bounce函数，我不知道如何“恢复”默认行为，在这种情况下，转到取消公告时间尾部的链接，或者在上一个代码段中，当diff>threshold时，如何触发默认事件行为转到链接？以及在上一个代码段中，由于您直接调用闭包函数，它会为每个链接单击创建新的回调函数吗？可能需要要将闭包创建移出事件处理程序，使其只创建一次？您好，对于第一个问题，我想您需要查看尾随的可选参数。对于第二个问题，我认为您应该创建一个通用函数，该函数将事件作为参数并实现通用行为。然后，您可以随时调用它。For最后一个，是的，它确实为每个链接创建了新的闭包，这就是我提到查看事件委派的原因。我将在下午用一个与jQuery相关的示例更新我的帖子。感谢用代码示例进行的简洁完整的解释，这绝对是一个令人困惑的答案！我研究了lodash debounce函数，我无法解释我们将讨论如何“恢复”默认行为，在这种情况下，转到取消公告时间尾部的链接，或者在上一个代码段中，当diff>threshold时，如何触发默认事件行为转到链接？以及在上一个代码段中，由于您直接调用闭包函数，它会为每个链接单击创建新的回调函数吗？可能需要要将闭包创建移出事件处理程序，使其只创建一次？您好，对于您的第一个问题，我认为您需要查看尾随的可选参数。对于第二个问题，我认为您应该创建一个通用函数，该函数将事件作为参数并实现通用行为