4

このコードは Safari と Chrome で動作しますが、Firefox では動作しません。firefox は StopPropagation() に問題がありますか?

$(function() {
    // Setup drop down menu
    $('.dropdown-toggle').dropdown();

    // Fix input element click problem
    $('.login-menu form').click(function(e) {
        alert(e.isPropagationStopped());
        e.stopPropagation();
        alert(e.isPropagationStopped());
    });
});​
4

4 に答える 4

7

HTML がどのように表示されるかはわかりませんがstopPropagation、FireFox では問題なく動作します。

あなたの期待はそれが何をするかについて間違っているかもしれないと思います。

stopPropagation()のドキュメントによると

event.stopPropagation()
イベントが DOM ツリーにバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。

たとえば、次のような HTML を想定します。

<div id="parent">
    <div class="login-menu">click anywhere</div>
</div>

このコードは正常に動作し、クリック イベントは発生しません。

$(function() {
    // Fix input element click problem
    $('.login-menu').click(function(e) {
        alert(e.isPropagationStopped());
        e.stopPropagation();
        alert(e.isPropagationStopped());
    });

    $("#parent").click(function(e){
        alert("parent received click");
    });
});​

デモ- FF で動作 - イベントをバブルアップしない

DEMOの行をコメント アウトするe.stopPropagation();と、予想どおりイベントがバブル アップし、親からのアラートが表示されます。

あなたの期待される行動は何ですか？

何が起こると予想されるかを指定していません。

たとえば、イベントのデフォルト アクションがトリガーされないと予想される場合は、preventDefault()を使用できます。

event.preventDefault()
このメソッドが呼び出されると、イベントのデフォルト アクションはトリガーされません。

両方をカバーしたい場合は、デフォルトのアクションを防ぎ、イベントがバブルアップするのを防ぎます。両方を呼び出すか、単にreturn falseメソッドの最後で使用します。

達成しようとしていることを詳しく説明していただければ、より具体的に、お客様に適した解決策を提案することができます。

于 2012-09-23T21:46:02.933 に答える
5

私は同じ問題に遭遇し、いくつかの「注意散漫エラー」を犯したことに気付いたらすぐに修正しました。

1) 「イベント」引数を覚えておいてください: イベントがトリガーされたときに実行される関数 (つまり、 $('.login-menu form').click() に引数として渡される関数) は、イベントを表す引数を受け入れる必要があります。 (慣例により、ほとんどのチュートリアルでは「イベント」または「e」と呼ばれます)。Chrome では忘れることができますが、Firefox ではそれが必要です。

2）Firefoxのキャッシュをクリアすることを忘れないでください（CTRL + F5）：私のように、開発のためにChromeのキャッシュを無効にする場合（ツール-> Javascriptコンソール->オプション->キャッシュを無効にする（DevToolsが開いている間））が、そうしないでくださいFirefox でも同じです (少し手間がかかりますし、私は怠け者です)。CTRL + F5 を使用してページをリロードすることを忘れないでください。

それは今、私にとって魅力のように機能します...

于 2014-04-03T00:13:04.093 に答える
1

stopPropagation親要素でのイベントのトリガーを停止するために使用されます。

仕組みの例については、http://jsfiddle.net/Accus/2/を参照してください。

HTML:

<body>
    <div>
        <span>Test</span>
    </div>​
<body>

JS:

$('span').click(function(e) {
    console.log('span');
    console.log(e.isPropagationStopped());
});

$('div').click(function(e) {
    console.log('div');
    console.log(e.isPropagationStopped());
    e.stopPropagation();
    console.log(e.isPropagationStopped());
});

$('body').click(function(e) {
    console.log('body');
    console.log(e.isPropagationStopped());
});

​
​
于 2012-09-23T21:40:25.117 に答える