在 if 语句中添加多个 EventListener

Question

是否可以在执行 af 函数之前检查多个事件监听器？

以下代码的目的是，当我单击一个按钮时，它会检查两个元素是否被单击，并放入一个箭头。

我基本上想做的是检查。如果 (element && element 1 ) 被点击，那么它应该在元素之间放置一个箭头（在这种情况下我使用图片）。有更好的方法吗？如果是的话，我应该怎么走？

var el = document.getElementById("elements");
var el1 = document.getElementById("elements1");

document.getElementById("myBtn").addEventListener("click", function() {
    myFunction();
});    

function myFunction() {
    if (el.addEventListener && el1.addEventListener) {
        var arrow1 = document.getElementById("picture");
        alert("clicked"); //just to check if func is executed
    }
}

Answer 1

如果您要检查之前是否已单击这两个框，则需要为每个框设置一个标志。您可以通过多种方式执行此操作，但一种是在每个按钮的单击处理程序中设置 data-* attribute。然后，您可以在每个处理程序中检查这些数据属性。

html

<button id="btn1">Button 1</button><button id="btn2">Button 2</button>

javascript

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.addEventListener("click",checkClicks);
btn2.addEventListener("click",checkClicks);

function checkClicks(){
  this.dataset.clicked = 1;
  if(btn1.dataset.clicked == 1 && btn2.dataset.clicked == 1){
    //both were clicked do what is needed
  }
}

现在，由于您在列中提到了多个框，并在 html 中对它们进行了更多设置，并且使用事件委托可以帮助您保持代码较小。例如，您可以再次使用 data-* attributes 并设置一个属性来保存匹配元素的 id。然后拿那个id去查找元素，看看有没有被点击：

html

<table>
  <tr>
    <td>
      <div id="box1" data-match="box5"></div>
      <div id="box2" data-match="box6"></div>
      <div id="box3" data-match="box7"></div>
      <div id="box4" data-match="box8"></div>
    </td>
    <td>
      <div id="box5" data-match="box1"></div>
      <div id="box6" data-match="box2"></div>
      <div id="box7" data-match="box3"></div>
      <div id="box8" data-match="box4"></div>
    </td>
  </tr>
</table>

javascript

//Use event delegation so we only need a single event listener
//instead of multiple ones for each box
document.addEventListener("click",function(event){
  //get the box that was clicked
  var box = event.target;
  //set the clicked flag
  box.dataset.clicked = 1;

  //get the matching id for the other box from the data-match attribute
  var matchId = box.dataset.match;

  var box2 = document.getElementById(matchId);

  //don't really need the "box.dataset.clicked == 1" check
  //as we set it earlier, just have it here for clarity
  if(box.dataset.clicked == 1 && box2.dataset.clicked == 1){
    //do what needs done
  }
});

---

演示

document.addEventListener("click", function(event) {
  var box = event.target;
  box.dataset.clicked = 1;

  var matchId = box.dataset.match;
  var box2 = document.getElementById(matchId);

  if (box2.dataset.clicked == 1) {
    //clear the click flags
    box.dataset.clicked = 0;
    box2.dataset.clicked = 0;
    
    //display that we have a match
    box.closest("tr").children[2].innerText = box.id + " matched to " + box2.id;
  }
});

div {
  border:1px solid rgba(0,0,0,0.3);
  padding:3px;
}

<table>
  <tr>
    <td>
      <div id="box1" data-match="box5">box1</div>
      <div id="box2" data-match="box6">box2</div>
      <div id="box3" data-match="box7">box3</div>
      <div id="box4" data-match="box8">box4</div>
    </td>
    <td>
      <div id="box5" data-match="box1">box5</div>
      <div id="box6" data-match="box2">box6</div>
      <div id="box7" data-match="box3">box7</div>
      <div id="box8" data-match="box4">box8</div>
    </td>
    <td></td>
  </tr>
</table>