单击子元素也会触发其父元素的单击事件[重复]

Scenario

我的主干应用程序中的视图由几个部分组成boxes(which are div elements)。当用户单击一个框并按住鼠标按钮 500 毫秒时，我想显示一个delete左上角的按钮。当用户点击其他地方时#wrapper然后delete按钮应该隐藏。

Problem

如此表现delete按钮不是问题。当我单击并按住一秒钟时，它确实显示删除按钮，它显示删除按钮半秒然后隐藏。它隐藏是因为我还将单击事件添加到其父元素#wrapper这实际上隐藏了这个删除按钮。

Question

那么我怎样才能停止父元素#wrapper当我单击并按住子元素时触发单击事件box?

这是我的代码

这是父元素模块的代码

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
    }

});

这是子元素的模块

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

});

Pass event作为论证和使用.stopPropagation().

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