clicking on child element also triggers click event on it parent [duplicate]

3
votes

Scenario

My view in my backbone app consists of several boxes(which are div elements). When user clicks on one box and hold down the mouse button for 500 millisecond, then I want to show a delete button on top left corner. When user clicks on anywhere else #wrapper then that delete button should hide.

Problem

So showing delete button is not the issue. It does show delete button when I click and hold for a second it shows delete button for half a second then hides. It hides because I am also adding click event to its parent element #wrapper which actually hides this delete button.

Question

So how can I stop parent element #wrapper from triggering click event when I am clicking and holding down on child element box?

Here is my code

Here is the code for parent element module

var Boxes = Backbone.View.extend({
    el: '#wrapper',

    events: {
        'click': 'method' //when clicked on wrapper i.e. parent of box trigger method function
    },

    render: function (PaintBoxModel) {
        var paintBoxView = new PaintBoxView({ model: PaintBoxModel });
        this.$el.find('#contents').append(paintBoxView.render().el);
        return this;
    },

    method: function () {
        console.log('method');
        App.Vent.trigger('bodyclicked'); //trigger an event
    }

});

Here is module for child elements

var Box = Backbone.View.extend({
    events: {
        'mousedown': 'mouseHoldDown',
        'mouseup': 'removeMouseHoldDown'
    },

    initialize: function () {
        this.timeoutId = 0;
        App.Vent.on('bodyclicked', this.removeDeleteBtnShadow.bind(this)); //here I am listening to the click event when parent `#wrapper` is clicked
    },

    mouseHoldDown: function () {
        this.timeoutId = setTimeout(this.addDeleteBtnShadow.bind(this), 500);
    },

    removeMouseHoldDown: function () {
        clearTimeout(this.timeoutId);
    },

    addDeleteBtnShadow: function () {
            this.$el.append('<a href="#" class="remove">X</a>');
            this.$el.addClass('is-shadow');
    },

    removeDeleteBtnShadow: function () {
        this.$el.find('.remove').remove();
        this.$el.removeClass('is-shadow');
    }

});
2
javascriptjquerybackbone.js
event.stopPropagation() – Ohgodwhy

2 Answers

2
votes

Pass event as argument and use .stopPropagation().

removeMouseHoldDown: function (e) 
{
   e.stopPropagation();
}
0
votes

I just solved this by adding event.stopPrpagation on the child function. So for example -

var parentView = new Backbone.View.extend({
    ...
    events: {
        "click": "renderSomething"
    },
    renderSomething: function() {
        //some rendering code
    }
});

var childView = new Backbone.View.extend({
    ...
    events: {
        "click": "renderSomething"
    },
    renderSomething: function(event) {
         event.stopPropagation(); //this will stop the event from being propagated to the parent
        //some rendering code
    }
});