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-* 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>

在if语句中添加多个EventListener

1 个答案: