JQuery .mouseenter（）イベントは、.click（）または.mousedown（）イベントよりも非常に高速です

Question

私は非常に大きなhtmlページを持っていますが、私はクリック/表示/非表示プロセスが少し遅れている。

「クリック」の代わりに「マウスセンター」を使用すると、応答がほぼ瞬時に（「クリック」を使用すると2秒間ではなく）ほぼ即時に反応することがわかりました。

$("button.showhide").click(function() { $("#"+$(this).attr("id")+"-1").toggle() }); 

versus 

$("button.showhide").mouseenter(function() { $("#"+$(this).attr("id")+"-1").toggle() }); 

クリックイベントをmouseenterイベントと同じ速さにする方法はありますか？

ありがとうございました。

編集： この現象を説明するのに次のヘルプがありますか？ （のMouseEnterについて「JavaScriptのイベント」についての言及はありません。）

.click（）は、JavaScriptのイベントを「クリック」、または要素にそのイベントをトリガーするイベントハンドラをバインドし 。

.mousedown（） "mousedown" JavaScriptイベントにイベントハンドラをバインドするか、そのイベントを要素でトリガします。

.mouseenter（） マウスが要素に入ったときに発生するイベントハンドラをバインドするか、要素にそのハンドラをトリガします。

Answer 1

あなたは（結合事象のためのjQuery 1.7の使用on方法から）あなたのイベントをトリガするために、デリゲートを使用する必要があります。

$("button").on('click','.showhide',function(){/*...*/}); 

あなたはイベント処理の速度を向上させることができ、それは、HTMLマークアップに依存します。あなたのshowhideボタンのすべてが特定のdivでグループ化され、他のいくつかのボタンが他のすべての体の上に散在している場合
たとえば、あなたがこのようなものを使用する必要があります

$("button-container-selector").on('click','button.showhide',function(){/*...*/}); 

Answer 2

を私が時間だと思います処理する

function() { $("#"+$(this).attr("id")+"-1").toggle(); 

は、2つのケースで全く同じです。マウスセンターがクリックよりもはるかに早くトリガーするため、より速いと思います。

私は考えることができる唯一の事は、あなたが本当にクリックハンドラの多くを持っているということですが、私はあなたが本当に

EDIT物事を遅くするためにたくさんnead考える - ことで

$('body').on("click", "button.showhide", function() { $("#"+$(this).attr("id")+"-1").toggle()); 

Answer 3

をやってみ以前のすべての回答を読んで、その質問で説明されている行動は、重要な情報が欠落している可能性があると私は思っています。万一、タブレットやタッチ対応デバイスでテストが行​​われていましたか？

一部のタッチ対応ブラウザまたはデバイスでは、クリックイベントを遅らせて遅延を許容するため、ユーザーはクリックを発行する代わりにジェスチャーを開始できます。これは、あなたのケースでは、「マウス」または「クリック」が「マウスセンター」よりも遅い理由を説明します。これは、モニターされている要素にタッチするとすぐにタッチデバイスで発生します。

応答性を向上させ、さまざまな種類のデバイスで互換性を持たせるためには、「mousedown」と「touchstart」（タッチ対応デバイスと互換性があります）を実行する必要があるコードにバインドしますマウスを押した後（または画面をタッチした後）あなたのケースでは

：

$("button.showhide").bind('touchstart mousedown', function() { 
    $("#"+$(this).attr("id")+"-1").toggle() 
}); 

私はこのことができます願っています。