jQueryでダブルクリックイベントのみを実装するにはどうすればよいですか?ダブルクリックイベントの実装方法（詳細説明）

この記事の内容は、jQuery がダブルクリック イベントのみを実装する方法を紹介することです。ダブルクリックイベントの実装方法（詳細説明）。困っている友人は参考にしていただければ幸いです。

jQuery のイベント バインディングでは、ダブルクリック イベント (dblclick) の実行時に 2 つのクリック イベント (click) をトリガーできます。つまり、ラベル要素 (p など) がクリック イベント (click) とダブルクリック イベント (dblclick) の両方にバインドされている場合、クリック イベント (click) が実行されると、ダブルクリック イベント (dblclick) はトリガーされず、ダブルクリック イベント (dblclick) は 2 つのクリック イベント (click) をトリガーしません。

まず、クリック イベントの実行シーケンスを見てみましょう。

クリック (クリック): マウスダウン、マウスアウト、クリック

ダブルクリック ( dblclick): マウスダウン、マウスアウト、クリック、マウスダウン、マウスアウト、クリック、dblclick;

ダブルクリック イベント (dblclick) では、トリガーされる 2 つのクリック イベント (click) のうち、最初のクリック イベント (click) will ブロッ​​クされましたが、2度目ではありません。つまり、ダブルクリック イベント (dblclick) は、クリック イベント (click) の結果とダブルクリック イベント (dblclick) の結果を返します。ダブルクリック イベントの結果 (dblclick) と 2 つのクリック イベントの結果 (click) の代わりに。

この場合、余分なクリックイベント（クリック）を削除するだけで問題は解決します。

setTimeout

jQuery の $(document).ready(function(){}) で直接開く:

//定义setTimeout执行方法
var TimeFn = null;

$('div').click(function () {
    // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //执行延时
    TimeFn = setTimeout(function(){
        //do function在此处写单击事件要执行的代码
    },300);
});

$('div').dblclick(functin () {
     // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //双击事件的执行代码
})

テスト結果からすると2 つのクリック間の時間が約 300 ミリ秒であれば、click イベントと dblclick イベントが「同時に」呼び出されることは依然として容易であり、間隔がそれより短くても長くても、click イベントまたは dblclick イベントのみが呼び出されます。

この時点で、ダブルクリック(dblclick)時にクリック(click)が発生することをある程度回避することができ、ダブルクリックイベントを実現することができます。

以上がjQueryでダブルクリックイベントのみを実装するにはどうすればよいですか?ダブルクリックイベントの実装方法（詳細説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。