클릭하면 또한 부모

Question

내 백본 응용 프로그램에서

내보기 여러 boxes(which are div elements) 구성 시나리오에 이벤트를 클릭 트리거합니다. 사용자가 하나의 상자를 클릭하고 마우스 버튼을 500 밀리 초 동안 누르고 있으면 상단 왼쪽 모서리에 delete 버튼이 표시됩니다. 사용자가 다른 곳을 클릭하면 #wrapper 그 다음 delete 버튼을 숨겨야합니다.

문제

그래서 delete 버튼을 표시하는 것은 문제가되지 않는다. 클릭 버튼을 1 초간 누르면 삭제 버튼이 보이고, 반 초 동안 삭제 버튼을 누르면 숨 깁니다. 또한 실제로이 삭제 버튼을 숨기는 부모 요소 #wrapper에 클릭 이벤트를 추가하기 때문에 숨 깁니다.

질문

그래서 내가 클릭하고 하위 요소 box 아래로 유지하고 때 클릭 이벤트를 트리거에서 부모 요소 #wrapper을 중지 할 수있는 방법?

여기 여기 내 코드

입니다 자식 요소 인수로

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

}); 

Answer 1

패스 event 및 .stopPropagation()를 사용하기 위해 여기

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 
    } 

}); 

이 모듈 부모 요소 모듈의 코드입니다.

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