Question

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

我知道我甚至可以使用

创建

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

但我没有得到我将如何捕获三次点击事件。

如果有人可以建议我采用写入方法，我将不胜感激。

感谢!!!

Answer 1

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

var clickTimes = 0;

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

Answer 2

您可以创建特殊活动 Code and example - 这是你的问题溶剂：）

Answer 3

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

$('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);
});

编辑：固定并添加了阈值控制。

Answer 4

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

例如：

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

Answer 5

这不使用外部变量，使用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)
        }    
    }

})

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

5 个答案: