0

わかりました、私のコードでは、たとえばこれがあります：

$('.follow').click(function(){
        var myself = $(this);
        var data = {
            id: this.getAttribute('data-id')
        }
        $.post('/users/setFriend', data, function(msg){
            myself.text(msg);
            myself.attr('data-status-friends', (myself.attr('data-status-friends').toLowerCase() == 'follow') ? 'following' : 'follow');
        });
    })

ただし、特定の要素に「認証」のクラスを配置し、ユーザーがログアウトした場合に次の JS を実行します。

$('.auth').click(function(e){
    e.preventDefault();
    alert('not logged in');
});

これはほとんどの要素で機能しますが、上記の POST では、まだ POST を実行しているようです。.auth がクリックされた場合に、他のコードによって発生したイベントを確実にキャンセルするにはどうすればよいですか?

4

3 に答える 3

0

イベントを停止するよりも、ログインせずに実行できないはずの要素にイベントを入れないか、変数を使用してJSコードの認証状態を追跡し、実行する前に確認する方がよいと思います。行動。クライアント側のMVCスタイルのアプリケーションを構築する場合は、後者の方がおそらく使用するのに適したアプローチです。

于 2012-06-19T22:08:20.310 に答える
0

ここでは、伝播やdefaultActionの防止について話す必要はないと思います。重要なのは、2つの異なる一連のイベントハンドラーを作成することです。1つは要素にアタッチされ.follow、もう1つは要素にアタッチされ.authます。もちろん、要素に2つのクラスがある場合、それをクリックすると、両方のハンドラーが自動的にトリガーされ、両方がこの要素にアタッチされます（したがって、伝播は行われません）。

ここでの最も簡単な解決策は、クラスをclick要素に割り当てるときに要素からハンドラーを削除することだと思います。.auth

または、ハンドラー関数$(this).hasClass('auth')内で条件を確認することもできます。その場合はすぐに確認できます。.followreturn false

于 2012-06-19T22:19:38.757 に答える
0

ここでは、異なるソリューション セットで 2 つの問題が発生する可能性があります。

  • リスナーは、本来あるべきものとは逆に、さまざまな要素にアタッチされています
  • リスナーは同じ要素にアタッチされています

さまざまな要素

ハンドラーが順不同です。e.stopPropogation() が内側 (子) 要素にあり、$.post() 呼び出しが外側 (親) 要素にあるように交換してください。

同じ要素

リスナーが同じ要素にある場合、e.stopPropogation() も e.preventDefault() も、イベント リスナーが同じ要素で引き続き起動するため、希望どおりに動作しません。

ストッププロポゲーション()

説明: イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

DOM レベル 2 仕様に従った伝播では、同じ要素のすべてのリスナーが引き続き実行されますが、親に関連付けられたイベントは実行されません。

キャプチャーする EventListener が、イベントのそれ以上の処理が発生するのを防ぎたい場合は、Event インターフェースの stopProgagation メソッドを呼び出すことができます。これにより、イベントのそれ以上のディスパッチが防止されますが、同じ階層レベルで登録された追加の EventListeners は引き続きイベントを受け取ります。

preventDefault()

説明: このメソッドが呼び出された場合、イベントのデフォルト アクションはトリガーされません。

デフォルトのアクションは、どの要素が処理されているか ( W3C )に基づいています。リンクの場合、これは href="" 値へのリダイレクト、それにフォーカスする入力要素などになります。「デフォルトの動作」ではない可能性が高いため、これはあなたが望むものではありません。

1 つのオプションは、$.post を呼び出すハンドラーを DOM の上位にある要素にアタッチすることです。

$('.follow').parent().click(function(e){e.stopPropogation()})

イベントをアタッチするための内部 (子) 要素と外部 (親) 要素を持つように、ターゲット HTML を変更する必要がある場合があります。目標は、$.post ハンドラーをアウター (親) として、インナー (子) ハンドラーでイベントをキャンセルすることです。

別のオプションは、要素に他のクラスが存在するかどうかを確認するチェックを追加することです。

$('.follow').click(function(){
    var myself = $(this);

    if(!$(this).hasClass('.auth')){
        var data = {
            id: this.getAttribute('data-id')
        }
        $.post('/users/setFriend', data, function(msg){
            myself.text(msg);
            myself.attr('data-status-friends', (myself.attr('data-status-    friends').toLowerCase() == 'follow') ? 'following' : 'follow');
        });
    }
});
于 2012-06-19T22:44:37.750 に答える