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

问题

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');
    }

});

回答1:

Pass event as argument and use .stopPropagation().

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

回答2:

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
    }
});

来源：https://stackoverflow.com/questions/16163934/clicking-on-child-element-also-triggers-click-event-on-it-parent

标签

javascript

jquery

backbone.js