2

jQueryのドキュメントによると

イベント ハンドラから false を返すと、自動的に event.stopPropagation() と event.preventDefault() が呼び出されます。function(){ return false; の省略形として、ハンドラーに false 値を渡すこともできます。}。したがって、 $("a.disabled").on("click", false); クラスが「無効」のすべてのリンクにイベント ハンドラーをアタッチします。これにより、クリックされたときにリンクをたどることができなくなり、イベントのバブリングも停止します。

したがって、クリックイベントを作成すると:

$('#sidebar').on("click", ".toggle", function() {
    $(this).parents("p").next("ul").toggle(400);
    return false;
});

.toggleからに伝播する機会がないため、クリックが登録されないことが予想されます#sidebar

私が思いついた唯一の説明は、これが許されるとon()関数がかなり無意味になるということです。おそらく、この場合はバイパスされますか?

on()バブリングに関しては、どのような規則に従いますか?

4

3 に答える 3

5

実際には、ハンドラは要素#sidebarではなく、要素にアタッチされてい.toggleます。

したがって、内側の要素をクリックすると、イベントは「#sidebar」に到達するまでバブルアップし、その後ハンドラのみが実行されます。ハンドラーで false を返すと、それ以降の伝播が停止します。

.on()のドキュメントでは、例を通じてこれについて言及しています。

まだ作成されていない子孫要素のイベントを処理できることに加えて、委譲イベントのもう 1 つの利点は、多くの要素を監視する必要がある場合のオーバーヘッドを大幅に削減できることです。tbody に 1,000 行のデータ テーブルで、この例では、ハンドラを 1,000 要素にアタッチします。

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

委譲イベント アプローチでは、イベント ハンドラーを 1 つの要素 (tbody) のみにアタッチし、イベントは 1 レベル (クリックされた tr から tbody まで) バブルアップするだけで済みます。

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});
于 2011-12-27T19:53:03.560 に答える
4

動作するためon()には、クリックイベントが呼び出し元の要素（この場合は）にバブルアップする必要があります#sidebar。on()次に、クリックのターゲットを調べてそれがそうであるかどうかを判断し、それ.toggleに応じて関数を起動します。

イベントをハンドラーに渡して追加できます

event.stopImmediatePropagation（）

他のバインドされたハンドラーが起動しないようにします。

于 2011-12-27T19:50:24.970 に答える
2

あなたの例のクリックイベントはに添付されて#sidebarおり、ハンドラーから false を返すと、DOM ツリーをさらに上に伝播しません。

フィドルの例を次に示します: http://jsfiddle.net/QymkW/

これは、イベント委譲の構文が最近変更された理由の 1 つです。構文を使用する.live()と、チェーンで渡す要素にイベントが関連付けられていると考えられますが、常にdocument. これは、伝播に関して混乱を招きました。

この.on()構文を使用すると、実際に何が起こっているのかをよりよく理解できます。イベントは渡された要素に添付され、子孫からイベントを委任する場合は、2 番目の引数を追加できます。したがって、委任された子孫と委任が機能する要素の間で伝播が「必要」ですが、イベントを添付した要素からのバブリングを防ぐことができます(あなたの場合#sidebar)

于 2011-12-27T19:41:41.383 に答える