Click event to exclude children (backbone.js)

Question

I have 2 elements, one nested in the other. (Its a modal dialog box). When a user click the outer element, a function closeModal should be triggered, if the user click on a li within the inner elements (its children), another function like should be triggered.

Problem: I looked at other solutions and tried applying to my backbone.js View, but it does not seem to work. Is there something different that has to be changed?

View

ModalShowItemView = Backbone.View.extend({
    el: '#modal_show_item',

    events: {
        'click div#modal': 'closeModal',
        'click li#like' : 'like'
    },

    initialize: function() {
        this.render();
        this.clickHandler();
    },

    render: function() {
        $(this.el).show().append( this.template( this.model.toJSON() ) );
    },

    clickHandler: function() {
        var self = this;
        $(this.el).click(function(e) {
            if(e.target == self) {
                self.closeModal();
            }
        });
    },

    closeModal: function() {
        console.log('closemodal');
    },

    like: function() {
        console.log('like');
    }
});

You have to do event.preventDefault();return false; inside like so that the event does not bubble...So in this case when the user clicks the outer div closeModal is called when he clicks inner div, like is called and event is not propagated... — Gautham Renganathan, Aug 06 '12 at 14:52

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

Your mention of other solutions is probably what you would need to do, except on the event object itself do a .stopPropagation() as in event.stopPropagation(). I do not know that event handlers bound via delegateEvents get passed any related event object, but it's not documented on the help page AFAIK.

edited May 23 '17 at 12:12

Community

1
1

answered Aug 06 '12 at 14:58

JayC

7,053
2
25
41

Click event to exclude children (backbone.js)

1 Answers1