добавить несколько EventListeners в оператор if

Можно ли проверить наличие нескольких прослушивателей событий перед выполнением функции 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
    }
}

javascript addeventlistener
person Sal1234    schedule 02.10.2018    source источник
comment
Вы имеете в виду, если они были нажаты ранее? Поскольку вы не можете щелкнуть по двум или более элементам одновременно. Или вы имеете в виду, что у них просто установлен какой-то прослушиватель событий?   -  person Patrick Evans    schedule 03.10.2018
comment
после нажатия кнопки он должен проверить, нажимаются ли элементы впоследствии. Честно говоря, я даже не уверен, что eventlistener является правильным решением для моего случая, это единственное, что я могу придумать. Мне в основном нужно связать ящики друг с другом   -  person Sal1234    schedule 03.10.2018
comment
У меня столбцы, по 10 ящиков в каждом. я пытаюсь сопоставить каждое поле с соответствующим из другого столбца   -  person Sal1234    schedule 03.10.2018
comment
Из этих 10 ящиков... это 5 связанных пар? A0 связан с A1? Или это многим нравится: A0 связано с [A1,B1,C1,D1,E1]   -  person zer00ne    schedule 03.10.2018
comment
Это много ко многим, ящик может быть связан с несколькими ящиками. и коробка может получить много стрел. ... и позже я должен сопоставить его с базой данных.   -  person Sal1234    schedule 03.10.2018

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите проверить, были ли нажаты два поля ранее, вам нужно будет установить флаг для каждого. Вы можете сделать это несколькими способами, но один из них — установить 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-* атрибуты и установите атрибут для хранения идентификатора соответствующего элемента. Затем возьмите этот идентификатор, чтобы найти элемент и посмотреть, был ли он нажат:

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>

person Patrick Evans    schedule 02.10.2018
comment
Спасибо за ответ, но как мне это сделать без предопределенных совпадений данных. бывший. если я хочу связать поле 2 с 8 и 5. и снова поле 4 с 6, 8 и 5. я думаю сделать поля кликабельными, но какой обработчик/тип события подойдет лучше всего? - person Sal1234; 03.10.2018