web-dev-qa-db-ja.com

ダブルクリックイベントが検出されたときにクリック/マウスアップイベントをキャンセルする必要がある

これはどのように行われますか？

javascriptjqueryevent-handlingclickdouble-click
43
Daddy Warbox

これは良い質問です。簡単にできるとは思いません。 （ これに関するいくつかの議論 ）

この機能を使用することが非常に重要である場合は、次のようにハッキングすることができます。

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$(selector).click(function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).dblclick(function(e) {
    $(this).data('double', 2);
    doubleClick.call(this, e);
});

そして、これが 仕事の例 です。

コメントで指摘したように、私が上記で行ったことをほとんど行うプラグインがありますが、パッケージ化されているので、醜いものを見る必要はありません： FixClick 。

77
Paolo Bergantino

Raymond Chenはいくつかの シングル対ダブルクリックの影響 について説明しましたが、彼はWindowsのコンテキストで話をしていますが、ブラウザーベースのUIデザインに関連していると述べています。

基本的に、ダブルクリックで実行されるアクションは、シングルクリック後に実行する論理的なものでなければなりません。たとえば、デスクトップUIでは、シングルクリックでアイテムを選択し、ダブルクリックでアイテムを開きます（たとえば、ファイルを開いたり、アプリケーションを起動したりします）。いずれにしても、ユーザーはファイルを選択して開く必要があるため、ダブルクリックアクションの前にシングルクリックアクションが実行されることは問題ではありません。

ダブルクリックアクションがシングルクリックアクションとはまったく無関係なUIコンポーネントがある場合、システムが実際にダブルクリックであるとシステムが認識したときにシングルクリックアクションが発生しないようにする必要がある場合は、実際に再考する必要があります。設計。ユーザーは、動作するものに慣れている方法では動作しないので、ぎこちなく、直感に反します。

それでもやりたい場合は、デバウンス技術を使用するか（この場合、すべてのシングルクリックアクションが遅延します）、またはダブルクリックハンドラーがシングルクリックハンドラーによって行われた作業を取り消すメカニズムを実装する必要があります。 。

また、一部のユーザーは非常に長いダブルクリック時間を設定していることにも注意してください。たとえば、関節炎の手を持つ人は、システム設定で1秒以上のダブルクリック時間を設定している可能性があります。そのため、選択した任意の期間に基づくデバウンステクニックにより、UIコンポーネントにアクセスできなくなります。シングルクリックアクションを実行すると、ダブルクリックアクションを実行できなくなります。 「シングルクリックで発生したことを元に戻す」手法は、私の知る限り、これに対する唯一の実行可能な回避策です。

33
NickFitz

他の回答で概説されているテクニックは debouncing として知られています。

7
Walter Rumsby

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

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

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

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

カスタムイベントを定義するためのソースコード here を見つけることができます。

AGPLライセンスに基づくオープンソースであるため、必要なものを自由に入手できます。 :-)また、日常的に活発に開発されているため、サポートが不足することはありません。

しかし、最も重要なのは、プラグインと拡張機能をはるかに簡単に開発できるようにするDRY Plugin/Effect Frameworkです。そのため、これがその目標の達成に役立つことを願っています！

1
balupton

これがフォームを送信するボタン用である場合（元のポスターの場合は必ずしもそうではありませんが、Google経由でここにアクセスする他の人がそうである場合があります）、クリックされている要素を無効にする簡単なオプションがあります。あなたのクリックイベントハンドラ：

$(selector).click(function(e) {
    $(this).prop('disable', true);
}
0
Charlie Kilian