jQuery родительский и дочерний divs, активирующие разные действия

Question

У меня есть элемент, который содержит много компонентов внутри него. Позволяет вызвать этот элемент. Теперь внутри коробки у меня много разных элементов, картинок, текста и кнопок.

Пример: http://jsfiddle.net/roman_khrystynych/FSCRH/

HTML:

<div id="container"> 
     <div class="box"> 
      <div class="button">Click</div>  
     </div> 
    </div> 

JQuery:

$('#container').on("click", ".box", function(){ 
     alert('box'); //only when anything in box except button 
    }); 

    $('#container').on("click", ".button", function(){ 
     alert('button'); //only when button clicked 
    }); 

Проблема в том, что при нажатии на кнопку элемент коробки также активизирует свои действия. По сути, я хочу, чтобы это было исключение, если я нажимаю на кнопку, обычные действия с ящиками не возникают, но вместо этого действуют действия кнопки. Какие-либо предложения?

Answer 1

То, что вы говорите о событийно пузырится. Когда вы нажимаете на дочерний элемент, он также запускает событие click для каждого отдельного родителя вплоть до вершины дерева DOM.

stopPropagation() отменит бурлит дерево DOM

Попробуйте это:

$('#container').on("click", ".button", function(e){ 
     e.stopPropagation() 
     alert('button'); //only when button clicked 
    }); 

Answer 2

У jquery есть функция для этого. http://api.jquery.com/event.stopPropagation/

stopPropagation();

останавливает событие щелчка от пузыриться.

http://jsfiddle.net/honk1/FSCRH/1/