web-dev-qa-db-ja.com

Backbone.jsでイベントの伝播を停止するにはどうすればよいですか？

Backbone.jsビューを使用して、次のイベントを含めたいとします。

    events: {
        'click a': 'link', 
        'click': 'openPanel' 
    }

リンクをクリックしたときにopenPanelが呼び出されないようにするにはどうすればよいですか。私が欲しいのは、アクションをトリガーするクリック可能なボックスを持つことですが、このボックスには、親アクションではなく、他のアクションをトリガーする要素を含めることができます。たとえば、Twitter.comや、ツイート/右側パネルのリンクを考えてみてください。

javascripteventsbackbone.js
36
Gunnar Lium

イベントの伝播を防ぐためにe.stopImmediatePropagation();を使用しています。これを行うためのより短い方法があったらいいのにと思います。 falseを返したいのですが。それはjQueryに精通しているためです

49
Tim Banks

JQuery preventDefaultメソッドも適切なオプションです。

    window.LocationViewLI = Backbone.View.extend({
        tagName: "li",
        template: _.template('<a href="/locations/<%= id %>"><%= name %></a>'),

        events: {
            "click a": "handleClick"
        },      
        handleClick: function(event) {
            event.preventDefault();
            console.log("LocationViewLI handleClick", this.model.escape("name") );
            // debugger;
        },
        ...
21
jspooner

各イベントハンドラーは、トリガーされるとイベントオブジェクトに渡されます。ハンドラー内では、jQueryのevent.stopPropagation（）メソッドを利用する必要があります。例えば：

link: function(event) {  
  //do some stuff here
  event.stopPropagation();
}
6
Gabe Hollombe

あなたのために働くかもしれない他の2つの方法：

1

_events: {
    'click a': 'link', 
    'click *:not(a, a *)': 'openPanel' 
}
_

その場合、openPanelは_<a>_または_<a>_の子のclickイベントをキャプチャしません（_<a>_タグにアイコンがある場合）。

2

openPanelメソッドの上部で、イベントターゲットが_<a>_ではなかったことを確認します。

_openPanel: function(event) {
    // Don't open the panel if the event target (the element that was
    // clicked) is an <a> or any element within an <a>
    if (event && event.target && $(event.target).is('a, a *')) return;

    // otherwise it's safe to open the panel as usual
}
_

これらのメソッドのどちらでも、openPanel関数を他の場所から（たとえば、親ビューまたはこのビューの別の関数から）呼び出すことができることに注意してください。 event引数を渡さないでください。それで問題ありません。また、link関数で特別なことを行う必要はありません。クリックイベントを処理して次に進んでください。ただし、おそらくevent.preventDefault()を呼び出す必要があります。

1
colllin