如何编写用户点击三次就会触发的自定义事件

How to write custom event which gets fired when user click three times

本文关键字：事件 自定义 三次 用户 何编写      更新时间：2023-09-26

我正在尝试编写一个自定义事件，当用户在任何html节点上单击三次时，该事件都会被触发。

我知道我甚至可以使用创建

var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);

但我不知道如何捕捉三次点击事件。

如果有人能向我推荐这方面的写作方法，我将不胜感激。

谢谢！！！

您可以创建一个特殊事件代码和示例-这是您的问题解决方案：）

只需创建一个存储点击次数的变量。

var clickTimes = 0;
element.addEventListener('click', function(event) {
    clickTimes++;
    if(clickTimes==3) { 
        clickTimes = 0;
        /* do something like dispatch my custom event */ 
    }
});

这将计算任何特定元素的点击次数，并在每三次点击时触发Event。

$('selector').on('click',function(e){
    Event_threshold = 500;
    var clicked_times = $(this).data('Event-clicked-times');
    if(clicked_times == '')
        clicked_times = 0;
    if(clicked_times == 0)
        $(this).data('Event-first-click-timestamp',e.timeStamp);
    clicked_times++;
    if(e.timeStamp-$(this).data('Event-first-click-timestamp')<Event_threshold)
    {
        if(clicked_times == 3)
        {
            $(this).data('Event-clicked-times',0);
            $(this).trigger('Event');
        }
        else
            $(this).data('Event-clicked-times',clicked_times);
    }
    else
         $(this).data('Event-clicked-times',0);
});

编辑：修复并添加了阈值控制。

您可以创建迭代变量并检查元素是否被单击了三次。

例如：

var clickTimer = 0;
document.body.addEventListener('click', function() {
    clickTimer++;
    if(clickTimer == 3) {
        clickTimer = 0;
        // fire your event
    }
}, true);

要使此行为类似于dbclick，您可以将时间戳与第一次单击进行比较。

例如：

var clickTimes = 0;
var fisrtClickTime = 0;
element.addEventListener('click', function(event) {
    clickTimes++;
    if(clickTimes == 1) {
        fisrtClickTime = +new Date();
    }
    if(clickTimes == 3) { 
        clickTimes = 0;
        firstClickTime = 0;
        if((+new Date() - fisrtClickTime) < 1000) {
            /* do something like dispatch my custom event */ 
        }
    }
});

这在不使用外部变量的情况下工作，使用HTML5"data-"属性进行存储，因此您将处理多个元素。

$('#yourLink').click(function() {
     window.setTimeout(function() {$(this).data("count",1)},300)
     if(typeof $(this).data("count")=='undefined') {
         $(this).data("count",1) 
     }
     else {
       var myCount = parseInt($(this).data("count"))
       myCount++      
       if(myCount==3) {
          alert("3!")
          $(this).data("count",0)
       }
        else {
           $(this).data("count",myCount)
        }    
    }
})
相关文章：