How do I specify children only in the Backbone.js event handler?

Question

I have a view which has a view inside it (the same view in fact, its recursive). I want only the internal view to handle the event from an 'a' onclick event. I tried to do this by specifying only the direct children in the selector, but it doesnt work.

iv tried:

events: { 
    'click >a': 'toggle'
},

and

events: { 
    'click > a': 'toggle'
},

but they dont work, any suggestions? (Note: doing things like using tags and classes wont work because the view is recursive (meaning that both the inner and outer have the same event definitions)

Answer 1

I have run into the same issue, and have solved it by stopping the propagation of the event in my child view. For example...

events: {
    'click a': 'toggle'
},

toggle: function (e) {

    // Stop event here.
    e.stopImmediatePropagation();

    // Do more stuff...

}

This does not answer your question of how to specify specific child selectors, but it keeps the event from propagating up to other handlers.

Answer 2

e.stopImmediatePropagation() is handy if you have no other events firing when you click that specific element. What you should do otherwise is compare the e.currentTarget with the element you want to select. I.e.

events: {
    'click a': 'toggle'
}

toggle: function(e) {
    if (e.currentTarget == this.$el.find('a')[0]) {
        ...
    }
}

That way, if you have a parent view also firing an event when that link is clicked, it won't be stopped by e.stopImmediatePropagation();