how to stopPropagation in backbone.js

Question

My HTML code is like this:

<li data-id="<%=p.id %>" data-len="<%=products.length %>" data-count="<%=count %>">
    <div class="pro_list_imgbox">
        <img src="" />
    </div>
</li>

and my js code is like this:

events: {
            'click .pro_list_imgbox': 'loadPic',
            'click li[data-id]': 'detailHandler'
        },

loadPic: function (e) {
            var target = $(e.target),
                pic = target[0].nodeName === 'IMG' ? target : target.find('img');

            if (!pic.data('loadState')) {
                e.stopPropagation();
                if (e.isPropagationStopped()) {
                    alert('stoped');
                }
                pic.attr('src', pic[0].src += '?t' + new Date().getTime());
            }

        },

detailHandler: function (e) {
            alert('haha');
        },

I've invoked e.stopPropagation() in function loadPic when I click the img element and it's called successfully. But why detailHandler still excuted and 'haha' alert. How can I fix this problem?

Answer 1

Looks like you are almost in the right direction. Please check whether the following fix your problem:

events: {
            'click .pro_list_imgbox': 'loadPic',
            'click li[data-id]': 'detailHandler'
        },

loadPic: function (e) {
            var target = $(e.target),
                pic = target[0].nodeName === 'IMG' ? target : target.find('img');

            if (!pic.data('loadState')) {
                pic.attr('src', pic[0].src += '?t' + new Date().getTime());
            }
           //this return statement will not allow the event to propagate to the parent element.
            return false;

        },

detailHandler: function (e) {
            alert('haha');
        },