47

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

4

5 に答える 5

80

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

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

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。

于 2009-07-01T05:56:32.607 に答える
35

Raymond Chen は、シングル クリックとダブル クリックの関係について議論しています。彼は Windows のコンテキストで話していますが、彼の言うことはブラウザ ベースの UI デザインに関連しています。

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

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

それでもそのようにしたい場合は、デバウンス手法を使用するか (この場合、すべてのシングル クリック アクションが遅延します)、またはダブルクリック ハンドラーがシングル クリック ハンドラーによって実行された作業を元に戻すメカニズムを実装する必要があります。 .

一部のユーザーは非常に長いダブルクリック時間を設定していることにも注意してください。たとえば、関節炎の手を持つ人は、システム設定で 1 秒以上のダブルクリック時間を設定している可能性があります。シングル クリック アクションを実行すると、ダブル クリック アクションを実行できなくなります。私の知る限り、「ワンクリックで起こったことを元に戻す」手法が、これに対する唯一の実行可能な回避策です。

于 2009-07-01T09:59:17.647 に答える
1

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:15:04.153 に答える
0

これがフォームを送信するボタンの場合 (元の投稿者の場合は必ずしもそうではありませんが、Google 経由でアクセスした他のユーザーの場合はそうである可能性があります)、より簡単なオプションは、クリックされている要素を無効にすることです。クリック イベント ハンドラ:

$(selector).click(function(e) {
    $(this).prop('disable', true);
}
于 2012-06-13T16:01:14.293 に答える