Question

是否可以更改jQuery事件发生的顺序？我还没有找到明确的答案。

我有一个外部和内部div。每当您单击内部div时，都会首先触发内部div事件。然后是外部div事件，即使一个事件是在前后创建的。

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

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

Answer 1

Updated fiddle 。

您需要使用stopPropagation()阻止事件冒泡到父div：

$("#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>

Answer 2

执行的顺序取决于您将它们放在js文件中的方式（从上到下，从左到右）。但是在这种情况下，它首先触发innerDiv事件，因为这是您单击的元素。是否先放置$("#outerDiv").on("mousedown" ...)都没关系。

但是它执行mousedown的{{1}}事件，因为点击在DOM tree中向上传播，因此，如果要停止该传播，可以使用{{1} }“ Zakaria Acharki”答案中提到的事件。

jQuery更改事件顺序

2 个答案: