4

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

我知道我甚至可以使用

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

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

如果有人可以建议我为此编写方法，我将不胜感激。

谢谢！！！

4

5 回答 5

2

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

var clickTimes = 0;

element.addEventListener('click', function(event) {
    clickTimes++;
    if(clickTimes==3) { 
        clickTimes = 0;
        /* do something like dispatch my custom event */ 
    }
});
于 2012-04-04T14:00:19.333 回答
2

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

于 2012-04-04T14:02:17.867 回答
1

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

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

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

于 2012-04-04T14:05:42.687 回答
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 */ 
        }
    }
});
于 2012-04-04T13:59:14.750 回答
0

这在不使用外部变量的情况下工作，使用 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)
        }    
    }

})
于 2012-04-04T14:10:52.107 回答