Javascript 如何编写用户单击三次时触发的自定义事件

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

我知道我甚至可以使用

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

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

如果有人能为我推荐写作方法，我将不胜感激

---

谢谢

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

例如：

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

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 */ 
        }
    }
});

要使此行为类似于

dbclick

，可以将时间戳与首次单击进行比较

例如：

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

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 */ 
        }
    }
});

var clickTimes=0；
var FisrClickTime=0；
元素。addEventListener（'click'，函数（事件）{
点击次数++；
如果（点击次数==1）{
FistrClickTime=+新日期（）；
}
如果（点击次数==3）{
点击次数=0；
firstClickTime=0；
如果（（+新日期（）-FisrClickTime）<1000）{
/*执行类似于分派我的自定义事件的操作*/
}
}
});

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

var clickTimes = 0;

element.addEventListener('click', function(event) {
    clickTimes++;
    if(clickTimes==3) { 
        clickTimes = 0;
        /* do something like dispatch my custom 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);
});

$（'selector'）。在（'click'，函数（e）{
事件阈值=500；
var clicked_times=$（this）.data（'Event-clicked-times'）；
如果（单击次数=“”）
点击次数=0；
如果（单击次数==0）
$（this）.data（'Event-first-click-timestamp'，例如timestamp）；
点击_次++；
if（e.timeStamp-$（this）.data（'Event-first-click-timeStamp'）这在不使用外部变量的情况下工作，使用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)
        }    
    }

})

它是在任何时间段内三次，还是三次快速单击（如
dblclick
）？是的。
三次快速单击
如
dblclick