En cliquant sur l'élément enfant déclenche également l'événement de clic sur le parent

Scénario

Ma vue dans mon application de backbone se compose de plusieurs boxes(which are div elements) . Lorsque l'utilisateur clique sur une boîte et maintenez le bouton de la souris enfoncé pendant 500 millisecondes, je souhaite afficher un bouton de delete sur le coin supérieur gauche. Lorsque l'utilisateur clique sur n'importe où #wrapper alors ce bouton de delete doit se cacher.

Problème

Donc, le bouton de delete n'est pas le problème. Il affiche un bouton de suppression lorsque je clique et maintenez enfoncé pendant une seconde, il affiche le bouton de suppression pendant une demi-seconde puis se cache. Il se cache car #wrapper également un événement de clic à son élément parent #wrapper qui cache en fait ce bouton de suppression.

Question

Alors, comment puis-je arrêter l'élément parent #wrapper de déclencher un événement de clic lorsque je #wrapper et maintenez enfoncé la box élément enfant?

Voici mon code

Voici le code du module élément élémentaire

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

Voici le module pour les éléments enfants

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

Passez l' event comme argument et utilisez .stopPropagation() .

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

Je viens de résoudre cela en ajoutant event.stopPrpagation sur la fonction enfant. Donc, par exemple,

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