return false_javascript スキルの正しい使用方法の簡単な分析

おそらく、最初に jQuery イベント処理について学び始めたとき、最初に目にした例は、クリック イベントを示す次のコードなど、ブラウザーがデフォルトの動作を実行しないようにする方法に関するものでした。 >

コードをコピー コードは次のとおりです:$("a.toggle").click(function () {

$( "#mydiv").toggle();

return false; // ブラウザが `#` にアクセスするのを防ぎます


この関数は、またはを表示するためにトグルを使用します。 #mydiv を非表示にし、ブラウザが href で指定されたリンクにアクセスし続けるのを防ぎます。

上記のような例では、ブラウザがデフォルトの動作を実行しないようにするために「return false」を使用するという悪い習慣がユーザーに身につきます。この記事では、ブラウザがデフォルトの動作を実行しないようにする 2 つの非常に重要な方法について説明します。重要なトピック:

•適切なメソッドを選択します:

return false またはPreventDefault、stopPropagation または stopImmediatePropagation•適切な位置、開始、終了、または中間を選択しますどこか:
イベント コールバックのどの部分でブラウザのデフォルトの動作をキャンセルする必要がありますか? 注:

この記事でイベント バブリングについて言及するとき、私が言いたいのは、ほとんどのイベントは最初に発生し、DOM 上でトリガーされ、その後終了するということです。 DOM ツリーを介して親要素の各レベルでトリガーすると、イベントは兄弟ノードや子ノードでバブルアップしません (イベントがバブルダウンすることをイベント キャプチャ (イベント キャプチャ) と呼びます)。イベントについて詳しく学ぶことができます。ここでバブリングしてキャプチャします。 適切な方法を選択してください

「return false」が非常に誤用されている理由は、与えられたジョブが完了したように見えるためです。ブラウザは、href 内のリンクにリダイレクトされなくなり、フォームもリダイレクトされなくなります。 href 内のリンクは引き続き送信されますが、これを行うことの何が問題なのでしょうか?

「return false」とは具体的に何をするのでしょうか?

「return false」を呼び出すたびに、実際には次の 3 つの処理が実行されます。

•event.preventDefault();

•event.stopPropagation();

•コールバック関数の実行を停止し、すぐに戻ります。

「ちょっと待って」って叫んだよ！ブラウザーがデフォルトの動作の実行を停止するだけで、他の 2 つのことを実行する必要はありません。

これら 3 つのうち、ブラウザがデフォルトの動作を実行し続けるのを防ぐために使用されるのは、イベントのバブリングを停止しない限り、return false を使用すると、コードに多くの隠れた危険が植え付けられることになります。このような誤用の結果を実際の例で見てみましょう:
これは、デモに使用した HTML です:

コードをコピーします

コードは次のとおりです:

マイページ

>

>

他のページ

text...

次に、ユーザーが記事のタイトルをクリックしたときに記事を div.contentd に動的にロードするとします。 :




コードをコピー

コードは次のとおりです:

jQuery(document).ready(function) ($) { $("div.post h2 a").click(function () { var a = $(this), href = a.attr('href'), / / jQuery で `href ` を正規化します。 content = a.parent().next(); content.load(href " #content"); // デフォルトを「キャンセル」します。リンクをたどる動作

})

);
このコードは (少なくとも現時点では) 正常に動作しますが、この考え方に沿って続けると、ユーザーが div.post 要素 (またはその子) をクリックしたときにメッセージを表示したい場合はどうすればよいでしょうか。アクティブなクラスを追加するには、クリック コールバックを div.post に追加する必要があります:

コードをコピーコードは次のとおりです:

// ドキュメントの準備完了内:
var Posts = $("div.post");
Posts.click(function () {
/ / すべての div.post からアクティブを削除します
Posts.removeClass("active");
// これをこれに追加し直します
$(this).addClass("active")
} ) ;

ここで、投稿のタイトルをクリックすると、このコードは機能するでしょうか?答えは「いいえ」です。タイトルのクリック コールバックで、本来使用すべきものではなく return false を使用したためです。「return false」は、event.preventDefault(); と、event.stopPropagation(); に等しいため、イベントのバブリングは次のようになります。終了すると、クリック イベントは div.post にバブルアップされず、それに追加したイベント コールバックは当然呼び出されません。

ライブイベントや代表者によるイベントと混ぜると、状況はさらに悪化するでしょう。

コードをコピー コードは次のとおりです。

$("a").click( function () {
// 何かを実行します
return
});

$("a").live("click", function () {
/ / これは起動しません
});

では、本当に必要なものは何でしょうか?

preventDefault()

ほとんどの場合、return false を使用する場合、実際に必要なのは e.preventDefault() です。 e.preventDefault を使用するには、イベント引数をコールバック関数 (この場合は e) に渡す必要があります:

コードをコピー コードは次のとおりです。

$("a").click(function (e) {
// e == イベント データ
e. PreventDefault();
});

これによりすべての作業が行われますが、設定する制限が少なくなるほど、親ノードがイベントを処理し続けることが妨げられないことに注意してください。コードが柔軟であればあるほど、コードの保守が容易になります。

stopPropagation()

ただし、イベントのバブリングを停止する必要がある状況もあります。次の例を見てみましょう:

コードをコピーコードは次のとおりです。

通常のテキストと、その後に link に続いてテキストを追加します (たとえば、背景の変更など)。ただし、ユーザーのリンクをクリックする動作には影響しません (ユーザビリティの観点からは、この例はあまり良くありません。何も起こらないようにしたいかもしれません)。ユーザーが他の場所をクリックしたとき)。

コードをコピー

コードは次のとおりです:$("div.post")。 click(function () { // 最初のことを行います;

$("div.post a").click(function (e) {
//ブラウザのデフォルトのアクションをキャンセルしないでください。
// このイベントをバブルさせないでください。


この場合、 return false を指定すると、div の click イベントは発生しませんが、ユーザーはクリックしたリンクに到達しません。



stopImmediatePropagation()

このメソッドは、他の処理関数が現在のオブジェクトにバインドされている場合でも、オブジェクトにバインドされているすべてのイベントがバインド順序で実行されるようにします。

コードをコピー

コードは次のとおりです:

$("div a").click(function () {
// 何かを実行します
}); (e) {
// 他の処理を実行します
e.stopImmediatePropagation();
});

$("div a").click(function () {
// これは決して起動しません
});

$("div").click(function () {
// これは決して起動しません


この例はぎこちないと思われるかもしれませんが、コードが非常に複雑な場合、別のウィジェットやプラグインが同じオブジェクトにイベントを追加することがあります。このような状況が発生した場合は、それが必要になります。 stopImmediatePropagation を理解して使用してください。

false を返す

preventDefault と stopPropagation を同時に必要とし、コールバックの実行が完了するまで停止しないというブラウザのデフォルト動作をコードが受け入れることができる場合にのみ、「return false」を使用できます。ただし、他の jQuery 開発者向けに作成されたデモ コードではこのメソッドを使用しないことを強くお勧めします。誤用が増える可能性があるためです。また、「return false」は絶対に必要であると確信できる場合にのみ使用してください。

適切な場所を選択してください

「return false」を使用すると、コールバック関数の実行後にブラウザのデフォルトの動作がキャンセルされるだけですが、e.preventDefault を使用すると、より多くのオプションがあり、いつでもブラウザを停止できます。関数内のどこに配置するか。

1. 開発段階では、

を常に最初の行に置く必要があります。フォームを Ajax 送信に変更するためにデバッグしているときに、フォームがすでに古い方法に従って送信されているということは、最も避けたいことかもしれません。

2. 製品ステージ、プログレッシブ エンハンスメントを使用する場合は、コールバックの最後に配置するか、通常のページでプログレッシブ エンハンスメントを使用する場合は論理エンド ポイントに配置する必要があります。ブラウザが JS をサポートしていない (または無効になっている) 場合に、リンクのクリック イベントとフォームの送信イベントをサーバー側で処理する方法を検討してください。ここでの利点は、JS をオフにする場合は考慮せず、コールバック コードでエラーが発生して例外がスローされる場合のみを考慮していることです。

コードをコピーします

コードは次のとおりです:var data = {}; click(function (e ) { e.preventDefault(); // デフォルトの動作をキャンセル

// `my` が未定義であるためエラーをスローします

$("body").append(data.my .link);
// 元のリンクは機能せず、「クールな」
// ユーザーには何も残りません。


さて、同じイベントと、preventDefault 呼び出しを一番下に配置した場合の効果を見てみましょう:

コードをコピーします

コードは次のとおりです。> var data = {}; $("a").click(function (e) { // `my` が未定義のためエラー

$ ("body").append(data.my.link);

// この行に到達しないため、Web サイトはフォールバックします
//これの代わりに `href` を使用します。
// 「クールな」壊れた JavaScript!
e.preventDefault(); // デフォルトの動作をキャンセルします


Thisコードが常に適切に動作することを期待しないでください。コードが間違っていないことを前提とするよりも、エラーが発生したときに適切に応答する方が良いでしょう。


3. プロダクト段階では、
関数が JS で設計されている場合は、最初の行に配置する必要があります。

関数の最初の行である必要はありませんが、ここでの原則は、関数の関数が JS を通じて実装されている場合 (サーバー側の対話を必要としない)、この場合、互換性を考慮する必要はありません。これを最初の行に追加すると、URL に # 文字が表示されなくなりますが、ユーザーが混乱しないように、できる限り多くのエラー処理コードを追加する必要があります。エラーが発生したとき。

結論

ブラウザがデフォルトの動作を実行しないようにする必要がある場合に、この記事が正しい選択をするのに十分な情報を伝えてくれれば幸いです。 「return false」は、自分が何をしようとしているのかを本当に理解している場合にのみ使用し、関数内の正しい場所で対応するコードを呼び出していることを確認してください。最後に、コードを可能な限り柔軟にして、「return false」を再度使用しないようにしてください。