三重点击事件 | CSS-Tricks

$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
        clicks += 1;
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";
            
            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
        }
        $elem.data('clicks', clicks);
    }
    
};

用法

$("#whatever").bind("tripleclick", function() {
   // do something
}

Eric

# 2011年5月11日

运行良好，除了一个问题；

如果你点击一次，然后在页面上移动鼠标，然后回来再次点击，然后再次悬停，然后再次返回，它仍然会触发，只要它被点击了3次。这并不是真正的连续三重点击，更像是“只要它被点击了3次…”

当你将鼠标悬停在对象上时，是否可以绑定一个鼠标移出事件，将点击次数重置为0

JEEzahs

# 2011年6月28日

有没有办法重置这些特殊事件并使用某种清除链接重置DOM以便它可以重建？

我使用三重点击事件允许用户点击图像三次，然后每次点击的x，y坐标都放入文本输入框中。

我遇到的问题是，如果用户犯了错误，并且想要重新开始，我似乎无法销毁事件，然后让它自行重置以便用户再次使用。它会销毁事件，但它仍然会点击并将坐标标记到输入表单中。我需要完全重置，而无需实际发布。

我能想到的唯一方法是尝试在清除表单后发布表单，以便触发空输入错误，然后重新绘制页面并从头开始，因为验证错误。我尝试过解除绑定和销毁事件，但点击仍然有效并进入我的隐藏输入表单。啊哈 :)
Ben Alman 对特殊事件有一个很好的描述，但它对我来说似乎太长了，我无法耐心阅读。

Rafael Coelho

# 2011年8月3日

嘿，不错的功能，关于我发现的一个简单修正的问题

在“clicks += 1;”之后添加以下行

setTimeout(function(){ clicks=0; $elem.data(‘clicks’,0); },500);

我真的很感谢这个功能，谢谢！

Hoed

# 2012年6月28日

我稍微调整了一下，这样你必须在一秒钟内三重点击。

希望它有用


$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0, start = $elem.data('startTimeTC') || 0;
        if ((new Date().getTime() - start)>= 1000) {
            clicks = 0;
        }
        clicks += 1;
        if(clicks === 1) {
            start = new Date().getTime();
        }
        
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";
            
            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
        }
        
        $elem.data('clicks', clicks);
        $elem.data('startTimeTC', start);
    }
    
};

Jason Robinson

# 2013年4月10日

太棒了，谢谢！我最终使用了@Hoed的版本，但不得不进行以下更改；

jQuery.event.handle.apply(this, arguments)

更改为

$elem.trigger('tripleclick');

jQuery.event.handle 对我来说是未定义的，但我通过进行此更改使其工作。你知道为什么吗？:) 无论如何，如果有人遇到相同的情况。

Deliaz

# 2014年12月21日

我制作了jquery插件，它实现了真正的三重点击事件
https://github.com/Deliaz/jquery-trplclick

当我说“真实事件”时，我的意思是只有当所有三个点击都以相同的间隔触发时，才会触发“trplclick”事件。

noam

# 2019年8月27日

在这一行
jQuery.event.handle.apply(this, arguments)

handle 已弃用，应使用 dispatch
jQuery.event.dispatch.apply(this, arguments)

用法

评论

发表评论 取消回复

发表评论取消回复