ダブルクリックイベントが検出された場合、クリック/マウスアップイベントをキャンセルする必要があります

Question

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

Answer 1

これは良い質問ですが、実際には簡単にはできないと思います。 （Some discussion on this）

あなたがこの機能を持っていることが重要超大型のであれば、あなたはそうのようにそれをハック可能性：

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); 
}); 

そして、ここではexample of it at workです。

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

Answer 2

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

Answer 3

Raymond Chenは、Windowsの文脈で話しているが、ブラウザベースのUI設計に関連していると語っているが、implications of single-versus-double clickingのいくつかについて議論している。

基本的に、ダブルクリックで行われる操作は、1回のクリック後に行うべき論理的な操作です。たとえば、デスクトップのUIでは、ワンクリックで項目が選択され、ダブルクリックすると開きます（ファイルを開く、アプリケーションを起動するなど）。ユーザーはファイルを選択して開く必要があるため、ダブルクリック操作の前にシングルクリック操作を行っても問題ありません。

ダブルクリックアクションがシングルクリックアクションと完全に無関係なUIコンポーネントがある場合、システムが実際にダブルクリックした後にシングルクリックアクションが発生しないようにする必要があるあなたのデザインを再考するべきです。ユーザーは演技に慣れていないので、扱いにくく直観的であることがわかります。

このようにしたい場合は、デバウンス手法を使用する必要があります（この場合、すべてのシングルクリックアクションが遅延されます）。そうでない場合、ダブルクリックハンドラは、シングルクリックハンドラ

また、一部のユーザーは非常に長いダブルクリック時間を設定することに注意してください。例えば、関節炎の手を持つ人は、自分のシステム環境設定で2回以上のクリック時間を持つかもしれないので、あなたが選んだ任意の時間に基づいたデバウンス技術は、あなたのUIコンポーネントにはアクセスできない単一のクリック動作を取ることは、ダブルクリック動作を排除する。私が知る限り、「ワンクリックで直前に起こったことを元に戻す」テクニックは、このための実行可能な回避策です。

Answer 4

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

$('#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です。この目標を達成するのに役立つことを願っています！

Answer 5

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

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