Как сделать так, чтобы onclick срабатывало только 1 раз?

[javascript_pupil]

Надо сделать защиту от дурака ошибки. Сейчас, при однократном нажатии кнопки значение поля изменяется. Очень желательно, чтобы при повторном нажатии изменений поля не происходило, либо, если это невозможно, при повторном нажатии мыши (скажем более 1 раза) происходило некое событие, например, менялся цвет поля (это я сам сделаю - примера с alert будет достаточно).

Читал stackoverflow, но одобренных решений не нашел.

[javascript_pupil]

Всем спасибо за внимание, нашел!

if (!clicked) {
// Set clicked to true
clicked = true;
}

Там ещё были варианты, но этого хватило.

[Aetae]

Но идеологически это не правильный вариант. Потому что бесполезное событие продолжает висеть.

Правильно делать так:

element.addEventElistener('click', function() {
  // ...
}, {
  once: true
})

[рони]

onclick срабатывало только 1 раз?

element.addEventListener('click', function() {  } , {once : true});

https://learn.javascript.ru/introduction-browser-events

[javascript_pupil]

Потому что бесполезное событие продолжает висеть.

Оно может чему-то помешать или навредить?

Вам, экспертам javascript - хорошо, а мне далеко не всё понятно в ваших примерах. При этом в "if" я могу засунуть изменение цвета "псевдокнопки" (тег span), чтобы визуально было понятно, что она уже нажата.

Сейчас мой код выглядит так:

<script>
var clicked = false;

function example1() {

	if (!clicked) {
	// Set clicked to true
	clicked = true;

Здесь выполняем необходимые действия.

	}

}
</script>

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

[ksa]

Оно может чему-то помешать или навредить?

Не стоит оставлять то, что потом будет не нужно.

При этом в "if" я могу засунуть изменение цвета "псевдокнопки" (тег span), чтобы визуально было понятно, что она уже нажата.

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

Т.е. использовать глобальную переменную для такого дела вообще не стоит.

[ksa]

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

После собственно определения элемента (в ДОМ), на который и будет навешиваться событие.

[ksa]

Как вариант...

<button id='element'>Тест</button>
<script>
element.addEventListener('click', function() {  
	alert('Меняем')
	element.addEventListener('click', function() {  
		alert('Нет')
	});
} , {once : true});
</script>

[javascript_pupil]

Как вариант...

Но я не могу использовать "button", а при использовании "span" это не работает.

[voraa]

Все работает со span

<span id='element'>Тест</span>
<script>
element.addEventListener('click', function() { 
    alert('Меняем')
    element.addEventListener('click', function() { 
        alert('Нет')
    });
} , {once : true});
</script>