Как заставить addEventListener работать один раз, пока я не закрою div? - PullRequest
Новая
       15

Как заставить addEventListener работать один раз, пока я не закрою div?

0 голосов
/ 08 марта 2020

Итак. У меня есть кнопка, которая меняет видимость на div -> spotPopUp. Я сделал EventListener, чтобы просто изменить видимость div (hidd на visible и т. Д.). Проблема?
Как сделать так, чтобы кнопка могла быть нажата только один раз, пока не будут нажаты кнопки «Отмена» или «Отправить» ? Когда я применяю removeEventListener, он не добавляется обратно при вызове функции. 

var spot = document.getElementById("spot");
spot.addEventListener("click", spotClick);

function spotClick() {
  spot.addEventListener("click", spotClick);
  let popUp = document.getElementById("spotPopUp");
  if (popUp.style.visibility == "visible") {
    popUp.style.visibility = "hidden";
  } else {
    popUp.style.visibility = "visible";
  }
  spot.removeEventListener("click", spotClick);
}
<input type="button" value="ADD SPOT" id="spot" />
<div id="spotPopUp">
  <h3>Add a Marker</h3>
  <a onclick="spotClick()"><p>Cancel</p></a>
  <a onclick="saveMarker()"><p>Add Marker</p></a>
</div>

Я надеюсь, что смогу заранее понять, извините за мой плохой английский sh.

Ответы [ 2 ]

0 голосов
/ 08 марта 2020

Ваша проблема в том, что когда вы вызываете spotClick() в элементе Cancel, он в конечном итоге удаляет прослушиватель событий, поскольку это буквально последняя команда в нем.

Вам нужны разные функции для эти два клика. Во-первых, ваш spotClick() должен только сделать ваше всплывающее окно видимым и не иметь никакого отношения к скрытию, при этом удаляя прослушиватель событий: 

function spotClick() {
  document.getElementById("spotPopUp").style.visibility = "visible";
  spot.removeEventListener("click", spotClick);
}

Затем вам нужна отдельная функция, которая будет скрывать его и подключать заново. слушатель события: 

function cancelClick() {
  document.getElementById("spotPopUp").style.visibility = "hidden";
  spot.addEventListener("click", spotClick);
}

Полный фрагмент: 

var spot = document.getElementById("spot");
spot.addEventListener("click", spotClick);

function spotClick() {
  document.getElementById("spotPopUp").style.visibility = "visible";
  spot.removeEventListener("click", spotClick);
}
function cancelClick() {
  document.getElementById("spotPopUp").style.visibility = "hidden";
  spot.addEventListener("click", spotClick);
}
<input type="button" value="ADD SPOT" id="spot" />
<div id="spotPopUp" style="visibility:hidden;">
  <h3>Add a Marker</h3>
  <a onclick="cancelClick()"><p>Cancel</p></a>
  <a onclick="saveMarker()"><p>Add Marker</p></a>
</div>
0 голосов
/ 08 марта 2020

Вы добавляете обработчик click к кнопке дважды, но удаляете его только один раз. Удалите второе добавление обработчика, и оно работает. 

var spot = document.getElementById("spot");
spot.addEventListener("click", spotClick);

function spotClick() {
  // spot.addEventListener("click", spotClick);  <-- PROBLEM IS HERE
  let popUp = document.getElementById("spotPopUp");
  if (popUp.style.visibility == "visible") {
    popUp.style.visibility = "hidden";
  } else {
    popUp.style.visibility = "visible";
  }
  spot.removeEventListener("click", spotClick);
}
<input type="button" value="ADD SPOT" id="spot" />
<div id="spotPopUp" style="visibility:hidden;">
  <h3>Add a Marker</h3>
  <a onclick="spotClick()"><p>Cancel</p></a>
  <a onclick="saveMarker()"><p>Add Marker</p></a>
</div>

И вы можете значительно упростить этот код, если уберете встроенные обработчики событий и CSS: 

// Get references to the elements you'll need to work with just once
let popUp = document.getElementById("spotPopUp");
let cancel = document.querySelector(".cancel");
let add = document.querySelector(".addMarker");

// Do your event binding in JavaScript, not inline in HTML
document.getElementById("spot").addEventListener("click", spotClick);
cancel.addEventListener("click", spotClick);
add.addEventListener("click", saveMarker);

function spotClick() {
  // Just toggle the use of the hidden class. 
  // No removeEventListener, if/then/else or inline style manipulation needed.
  popUp.classList.toggle("hidden");
}

function saveMarker(){
 // code here
}
/* Use CSS classes instead of inline CSS */
.hidden { display:none; }
<!--
  Don't use self-terminating syntax, it's only needed in XHTML and can 
  lead to confusion when not used properly.
  
  Don't use inline CSS or JavaScript. Separate your languages.
  
  Don't use <a> tags just for click event handling. Just about every
  HTML element supports a click event.
-->
<input type="button" value="ADD SPOT" id="spot">
<div id="spotPopUp" class="hidden">
  <h3>Add a Marker</h3>
  <p class="cancel">Cancel</p>
  <p class="addMarker">Add Marker</p>
</div>
...