javascript - 按顺序执行点击处理程序，仅在执行操作后呈现元素

Question

我试图让 jQuery 仅在特定时间监听点击。然而，当我添加事件监听器时，例如 $("#box").click(function(){，它们似乎在上面的代码运行之前执行。

我创建了一个文本示例，其中我有 2 个不同的框监听点击，我只希望第二个框在第一个框被点击后监听。在那之后，我希望他们停止听。因此，例如 box1 应该能够首先更改为红色，然后是 box2。

我曾尝试四处搜索此问题，但未能找到任何好的答案。我还尝试添加 if 语句，但是第二个框永远不会执行。非常感谢任何帮助。

pass = 0;

function change() {
  console.log("enter change");
  $("#box").click(function() {
    $(this).css("background-color", "red");
    pass = 1;
  })

  if (pass > 0) {
    $("#box2").click(function() {
      $(this).css("background-color", "red");
    })
  }
}

div {
  height: 100px;
  width: 100px;
  background-color: black;
  display: inline-block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="box"></div>
<div id="box2"></div>
<button onclick="change()"> change</button>

Answer 1

为了完成这项工作，我建议使用不同的模式。在动态时间附加点击处理程序可能会造成混淆，并使代码比需要的更复杂。

一个更简单、更有效的解决方案是在页面加载时绑定(bind)所有事件处理程序，并在每个事件处理程序中有条件地检查页面是否处于允许此事件处理程序执行其自己的逻辑的状态。

换句话说，您可以通过单击 #box 添加一个类，然后只允许在 #box2 上添加该类，一旦它被应用到 #框。试试这个:

$('#box').one('click', function() {
  $(this).addClass('foo');
});

$('#box2').click(function() {
  if ($('#box').hasClass('foo')) {
    $(this).addClass('foo').off('click');    
  }
});

div {
  height: 100px;
  width: 100px;
  background-color: black;
  display: inline-block;
  margin: 10px;
}
div.foo {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>
<div id="box2"></div>

这里有几点需要注意。首先，jQuery 1.4.2 非常过时；事实上将近 9 年。如果您需要旧版浏览器支持，则至少需要将其更新到 1.12.4，如果不需要，则需要更新到 3.x 分支上的最新版本。

其次，不要使用内联事件处理程序，例如onclick。使用不显眼的事件处理程序。由于您已经在使用 jQuery，因此只需使用 click() 方法即可。

这还使用 one() 添加一个只能触发一次的事件处理程序，并使用 off() 在成功执行后删除点击处理程序第一次。

它还使用 addClass() 而不是 css()，因为后者要求您将 CSS 逻辑放在 JS 中，应尽可能避免这种情况。