6

http://abeautifulsite.net/notebook/58でjQueryFileTreeを使用していますが、クリックは常にdblclickによってトリガーされるため、dblclickイベントとclickイベントを区別したいと思います。

グーグルアバウトは、dblclickがキャンセルしないときに開始するタイマーによってクリックが処理される手法になりました。

これをjQueryおよびjQueryの例でエレガントな方法で使用できる方法はありますか？

4

3 に答える 3

7

タイマー機能を使用setTimeout()して実現できます。clearTimeout()

var timeout;
var delay = 500;  // Delay in milliseconds

$("...")
    .click(function() {
        timeout = setTimeout(function() {
            // This inner function is called after the delay
            // to handle the 'click-only' event.
            alert('Click');
            timeout = null;
        }, delay)
    }
    .dblclick(function() {
        if (timeout) {
            // Clear the timeout since this is a double-click and we don't want
            // the 'click-only' code to run.
            clearTimeout(timeout);
            timeout = null;
        }
        // Double-click handling code goes here.
        alert('Double-click');
    }
;
于 2009-09-24T15:34:27.603 に答える
0

jQuery Sparkleは、シングルクリックのカスタムイベントを実装することにより、このためのクリーンでエレガントなソリューションを提供します。これを行うことで、他のイベントと同じように使用できます。

$('#el').singleclick(function(){});
// or event
$('#el').bind('singleclick', function(){});

また、一連のクリックの最後と最初のクリックのカスタムイベントも提供します。そして、lastclickカスタムイベントは実際にクリック数を返します！だからあなたはこれを行うことができます！

$('#el').lastclick(function(event,clicks){
    if ( clicks === 3 ) alert('Tripple Click!');
});

ここで私が今言ったことを示す適切なデモと、ここでカスタムイベントを定義するためのソースコードを見つけることができます。AGPLライセンスに基づくオープンソースであるため、必要なものを安心して入手できます。:-)また、日々積極的に開発されているため、サポートが不足することはありません。

しかし、最も重要なのは、プラグインと拡張機能をはるかに簡単に開発できるようにするDRYプラグイン/エフェクトフレームワークです。だから私はこれがその目標を達成するのに役立つことを願っています！

于 2010-07-16T09:11:49.417 に答える
0

次のコードを見てください

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        alert("Double click");
        //here is your code for double click
        return;
    }else{
         $this.addClass('clicked');
        //your code for single click
         setTimeout(function() { 
                 $this.removeClass('clicked'); },500);
    }//end of else
});

デモはここにありますhttp://jsfiddle.net/cB484/

于 2014-06-25T08:38:15.510 に答える