jQuery Изменить порядок событий

Question

Есть ли способ изменить порядок, в котором происходят события jQuery?Я не смог найти четкого ответа.

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

https://jsfiddle.net/nLvaehky/5/

$("#outerDiv").on("mousedown", function() {
    alert('outer div clicked!');
});

$("#innerDiv").on("mousedown", function() {
    alert('inner div clicked!');
});

Answer 1

Порядок выполнения зависит от того, как вы поместите их в файл js (сверху вниз, слева направо).Но в этом случае сначала запускается событие innerDiv, потому что это был элемент, по которому вы щелкнули.Неважно, если вы поместили $("#outerDiv").on("mousedown" ...) первым.

Но он выполняет событие mousedown outerDiv, потому что щелчок распространяется вверх в дереве DOM ,поэтому, если вы хотите остановить это распространение, вы можете использовать событие stopPropagation(), упомянутое в ответе "Закария Ачарки".

Answer 2

Обновленная скрипта .

Необходимо остановить всплывающее событие для родительского div, используя stopPropagation():

$("#outerDiv").on("mousedown", function() {
  alert('outer div clicked!');
});


$("#innerDiv").on("mousedown", function(e) {
  e.stopPropagation();

  alert('inner div clicked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerDiv" style="background-color:blue;">
  <br /><br /><br /><br />
  <br /><br /><br /><br />
  <div id="innerDiv" style="background-color:green;">
    <br /><br /><br /><br />
  </div>
  <br /><br /><br /><br />
</div>