Как работает функция click () в jquery при работе с несколькими сложенными div?

Question

Как работает функция click () в jquery при работе с несколькими стеками div?

У меня есть один основной div и другой div внутри основного div, когда я нажимаю на div внутри, это также считается щелчком по главному div, но я не хочу этого, я хочу, чтобы он рассматривал только нажатие на внутреннее отделение.

<div id="main"><div id="inner"></div></div>

Допустим, основной div намного больше, а внутренний - просто маленький квадрат, когда я нажимаю на внутренний div (маленький квадрат), я не хочу, чтобы он вызывал что-либо, как если бы я нажимал на основной div , Как мне это маневрировать? Еще раз спасибо!

Answer 1

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

Вам нужно вызвать event.stopPropagation(), чтобы предотвратить всплывание события до его элементов-предков.

$('#inner').click(function(evt) {
    evt.stopPropagation();
    // your code
});

• http://api.jquery.com/event.stopPropagation/

Другой альтернативой является return false; в конце вашего обработчика.

$('#inner').click(function(evt) {
    // your code
    return false;
});

Вы можете проверить это здесь: http://jsfiddle.net/ZpeYr/

Answer 2

$('#inner').click(function() {  
  alert('clicked inner div'); // do something
});

Вы можете вызвать свой внутренний div, используя идентификатор CSS.