7

私は最近、同僚とコーディング プラクティスの違いについて話し合っていました。そこで、彼のイベント ハンドラーで上記の 2 つのメソッドを過度に使用していることについて問題を提起しました。具体的には、それらはすべてこのように見えます...

$('span.whatever').on('click', function(e) {

    e.preventDefault();
    e.stopPropagation();

    /* do things */

});

彼は、これは予期せぬ問題を減らしながら、クロスプラットフォームのサポートを改善する良い方法であると主張しています。

皆さんへの私の質問: 彼が正しければ、なぜ jQuery チームはすべてのイベント ハンドラーにグローバルに適用されるこの動作を実装しなかったのですか? 事実上、メソッドが独立して使用できるという理由だけで彼が間違っているというのが私の推測ですが、誰が知っているのでしょうか... あなたの洞察は大歓迎です。

--

更新:簡単な速度テストを行ったところ、これら 2 つの機能が原因で少し抵抗がありましたが、特に目立つものはありませんでした。それでも、とりわけ、それらを慎重に使用する正当な理由があると思います。

$('span.whatever').on('click', function(e) {

    var start = new Date();

    for (i = 0; i < 999999; i++) {
        e.preventDefault();
        e.stopPropagation();
    }

    console.log( new Date() - start );

});

上記はそのままで約 9.5 秒、関数呼び出しをループから外した場合は約 2.5 秒を記録しました。

4

3 に答える 3

9

私はあなたの同僚と同じことはしませんが (すべてのイベント ハンドラーで 2 つの呼び出しをプッシュします)、「return false;」ではなくこれらの呼び出しを明示的に使用するという同じ習慣を持っています。人生をより簡単に。

Jquery を使い始めたとき、伝播を停止し、デフォルトを防止する必要がある場合は、「false を返す」だけでよいと考えました。

$('a.whatever').on('click', function(e) {

    do_stuff();

    return false;
});

しかし、偶然に遭遇した2つの問題がありました：

  • do_stuff() に例外を引き起こす重大なエラーがある場合、「false を返します。」届かない！！！エラーは最終的に jquery によって「適切に」飲み込まれます。イベントがバブリングし、ブラウザーにデフォルトのアクションを実行させます。あなたがシングルページアプリを使用していて、リンクがクリックされた場合、ページが離れてナビゲートされ、アプリ全体の状態がトイレに行きました（私は以前にそこにいました）。

  • 私は return false に対して寛大すぎました: 多くの場合、preventdefault() が必要でした。「return false」はイベントのバブリングを強制終了し、dom 階層の上位で別のアクションを実行する能力を妨げることがありました (または、使用していた他のプラグイン/ライブラリが正しく機能しなくなりました)。

だから私は今、明確にすることを好みます。私は文字通り「return false;」を決して使用しません。もう。デフォルトを伝播または実行してはならないイベントハンドラーがある場合、処理コードの前に意図的にそれを関数FIRSTに入れます。イベント処理中に何が起こっても、デフォルトのアクションを実行したくない、および/またはイベントがバブルしないという事実に影響を与えるべきではありません。

そうは言っても、必要に応じて 2 つのうちの 1 つだけを使用するように気をつけています (場合によってはまったく使用しません)。理由もなく preventDefault() と stopPropagation() の両方を追加するだけではありません。ハンドラーでイベントを操作する場合はどこでも、意識的なケースバイケースの決定の一部です。

于 2013-03-08T02:15:07.447 に答える
0 
<div id="wrapper">
            <div id="header">header
              <div id="footer">footer
              <div id="content">click this!!!</div>
              </div>
            </div>


        </div>


$("#wrapper div").click(function(){
  console.log(  $(this) )
});

divをクリックしてコンソールを表示してみてください...

そして今追加されました

$("#wrapper div").click(function(e){
  e.stopPropagation()
})
于 2016-01-04T09:47:26.533 に答える