Javascript 单击子元素也会触发其父元素上的单击事件

场景

我的主干应用程序中的我的视图由几个

框（它们是div元素）

组成。当用户单击一个框并按住鼠标按钮500毫秒时，我想在左上角显示一个

delete

按钮。当用户单击其他任何地方的

#wrapper

时，

delete

按钮应隐藏

问题

因此，显示

delete

按钮不是问题所在。当我点击并按住一秒钟时，它确实显示删除按钮。它显示删除按钮半秒钟，然后隐藏。它之所以隐藏，是因为我还在其父元素

#wrapper

中添加了click事件，实际上它隐藏了这个delete按钮

问题

那么，当我点击并按住子元素

框

时，如何阻止父元素

#包装器

触发点击事件呢

这是我的代码

下面是父元素模块的代码

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

});

var-Box=Backbone.View.extend({
活动：{
“mousedown”：“mouseHoldDown”，
“mouseup”：“removeMouseHoldDown”
},
初始化：函数（）{
this.timeoutId=0；
App.Vent.on（'bodyclicked'，this.removeDeleteBtnShadow.bind（this））；//在这里，当单击父级`#包装器`时，我正在侦听单击事件
},
mouseHoldDown:函数（）{
this.timeoutId=setTimeout（this.addDeleteBtnShadow.bind（this），500）；
},
removeMouseHoldDown:函数（）{
clearTimeout（this.timeoutId）；
},
addDeleteBtnShadow:函数（）{
本.$el.附加（“”）；
这是.$el.addClass（'is-shadow'）；
},
removeDeleteBtnShadow:函数（）{
这是.el.find（'.remove'）.remove（）；
这个.el.removeClass（'is-shadow'）；
}
});

将

事件

作为参数传递，并使用

.stopPropagation（）

---

我刚刚通过在子函数上添加event.stopperpagation解决了这个问题。比如说-

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

---

event.stopPropagation（）

我已经尝试过了，但是没有成功。首先，应该将

e.stopPropagation（）

添加到

removedeletebtshadow

函数中。我已经厌倦了它，但它给了我这个错误

未捕获类型错误：无法调用未定义的方法'stopPropagation'

返回false

你试过了吗。dipesh有一个

停止播放的地方

刚试过，但还是一样的问题。

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