Блог

Главная - Вопросы по программированию - Как я могу разрешить только один клик по своему изображению?

Как я могу разрешить только один клик по своему изображению?

#javascript

Вопрос:

Я создаю функцию с различными списками событий, которые запускаются щелчком мыши, но я хочу, чтобы они запускались только один раз, что означает, что после другого щелчка она не будет вносить никаких изменений. Я пробовал это делать const getEffect1 = document.getElementById("specialEffect1").disabled = true , но тезисы не работают.

 function clickedItems() {
      const getEffect1 = document.getElementById("specialEffect1")
      getEffect1.addEventListener("click", () => {
          effect1 = true
          var getCount = document.getElementById("submit").addEventListener("click", () => {
            console.log(count  = 1)
          })
      })
      getEffect1.onclick=""
    }

Ответ №1:

Поэтому удалите событие с помощью removeEventListener

 const getEffect1 = document.getElementById("specialEffect1");
const effectClick = () => {
  console.log('clicked');
  getEffect1.removeEventListener("click", effectClick);
};
getEffect1.addEventListener("click", effectClick); 
 <div id="specialEffect1">Click</div>

Или использовать опцию once 

 const getEffect1 = document.getElementById("specialEffect1");
const effectClick = () => {
  console.log('clicked');
};
getEffect1.addEventListener("click", effectClick, { once: true }); 
 <div id="specialEffect1">Click</div>

Ответ №2:

Вам нужно событие.предотвратить дефолт.

 function clickedItems() {
      const getEffect1 = document.getElementById("specialEffect1")
      getEffect1.addEventListener("click", (event) => {
          event.preventDefault();
          effect1 = true
          var getCount = document.getElementById("submit").addEventListener("click", () => {
            console.log(count  = 1)
          })
      })
      getEffect1.onclick=""
    }

Комментарии:

1. Следовало бы упомянуть, что это, вероятно, потому, что что-то другое вызывает запуск обработчика событий. В идеале выясните, что это такое, и исправьте это. В противном случае это должно сработать.

Ответ №3:

как насчет изменения внутреннего HTML-кода объекта после обнаружения первого щелчка? поэтому пользователи не могут отправить его снова.

Ответ №4:

Вы можете установить для этого once параметра значение true in addEventListener .

Логическое значение, указывающее, что прослушиватель должен быть вызван не более одного раза после добавления. Если верно, то прослушиватель будет автоматически удален при вызове.

 getEffect1.addEventListener("click", () => {
    effect1 = true;
    document.getElementById("submit").addEventListener("click", () => {
        console.log(count  = 1)
    });
}, {once: true})
Метки: