在if語句中添加多個EventListener

Question

是否可以在執行af函數之前檢查多個事件偵聽器？

以下代碼的目的是，當我單擊一個按鈕時，它隨后檢查是否兩個元素都被單擊，並放入一個箭頭。

我基本上想做的是檢查。 如果單擊（元素&&元素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- *屬性 。 然后，您可以在每個處理程序內部檢查這些數據屬性。

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- *屬性並設置一個屬性以保存匹配元素的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>