单击子元素也会触发其上的click事件parent

脚本

我在我的骨干应用程序中的视图包含几个boxes(which are div elements) 。 当用户单击一个框并按住鼠标按钮500毫秒时，我想在左上角显示一个delete按钮。 当用户点击其他任何地方#wrapper ，该delete按钮应该隐藏。

问题

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

题

那么当我点击并按住子元素box时，如何阻止父元素#wrapper触发click事件？

这是我的代码

这是父元素模块的代码

 var Boxes = Backbone.View.extend({ el: '#wrapper', events: { 'click': 'method' //when clicked on wrapper ie 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('X'); this.$el.addClass('is-shadow'); }, removeDeleteBtnShadow: function () { this.$el.find('.remove').remove(); this.$el.removeClass('is-shadow'); } }); 

Answer 1

将event作为参数传递并使用.stopPropagation() 。

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

Answer 2

我刚刚通过在子函数上添加event.stopPrpagation来解决这个问题。 例如 –

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