Как сделать так, чтобы функция onclick выполнялась только один раз?

У меня есть этот код для Google Analytics на кнопке. Мне нужно, чтобы он был выполнен только один раз, чтобы пользователь не мог изменить статистику, нажав кнопку много раз. Я пробовал решения из похожих тем, но они не работают. Пожалуйста помоги. Это мой код.

<script>
    function klikaj(i) {
        gtag('event', 'first-4', {
            'event_category' : 'cat-4',
            'event_label' : 'site'
        });
    }

    document.body.addEventListener("click", klikaj(i), {once:true})
</script>


<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">My button</div>

Ответы

Ответ 1

Вы можете использовать removeAttribute() следующим образом: document.getElementById('thumb0').removeAttribute("onclick");

или вы можете позволить функции возвращать false, как это: document.getElementById('thumb0').onclick = ()=> false

Ответ 2

Удалите атрибут onclick на своей кнопке и зарегистрируйте прослушиватель через JavaScript, как вы пытались это сделать: 

<div id="thumb0" class="thumbs"
  style="border: 1px solid; cursor: pointer; float: left">
    My button
</div>
<script>
    function klikaj(i) {
        console.log(i);
    }
    document.getElementById('thumb0')
        .addEventListener("click", function(event) {
            klikaj('rad1');
        }, {once: true});
</script>

Ответ 3

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

<script>
    var clicked = false;
    function klikaj(i) {
        if (clicked === false) {
            gtag('event', 'first-4', {
                'event_category' : 'cat-4',
                'event_label' : 'site'
            });
        }
        clicked = true;
    }
    ...
</script>

Или удаление события onclick в соответствии с рекомендациями других,

<script>
    function klikaj(i) {
        gtag('event', 'first-4', {
            'event_category' : 'cat-4',
            'event_label' : 'site'
        });
        document.getElementById('thumb0).onclick = undefined;
    }
    ...
</script>

Обратите внимание, что once: true, к сожалению, не поддерживается в IE и Edge. Видеть https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Ответ 4

Обработчики событий & Слушатели

Есть три способа * зарегистрировать событие для элемента. В следующих примерах показано, как зарегистрировать событие click для ссылки с классом .once **, который при запуске вызывает функцию test().

  1. Прослушиватель событий (рекомендуется)
    • document.querySelector('.once').addEventListener('click', test);'
  2. Атрибут события (не рекомендуется)
    • <a href='#/' class='once'OnClick = 'тест()'>Click</a>
  3. Недвижимость на мероприятии
    • document.querySelector('.once').onclick = test;'

*Подробнее см. в обработчиках событий DOM
** .once класс не подходит для # 2

Вопросы

OP (O riginal P ost) имеет прослушиватель событий (см. № 1 выше), регистрирующий событие щелчка в теге <body> и on-on атрибут события (см. № 2 выше), регистрирующий событие щелчка на <div>. Каждый из них вызывает функцию (также называемую функцией обратного вызова) с именем klikaj(), которая является избыточной. Щелчок по телу (который обычно везде) бесполезен, если вы хотите, чтобы пользователь щелкнул элемент div. Если пользователь щелкнет где-нибудь, кроме div, будет вызван klikaj(). Если пользователь нажмет на div, klikaj() будет вызван дважды. Я предлагаю удалить оба обработчика событий и заменить их следующим:

А.

document.getElementById('thumb0').addEventListener("click", klikaj);

Обратите внимание, что у klikaj нет круглых скобок (), потому что браузер интерпретирует () как запуск функции сейчас, а не когда пользователь запускает зарегистрированное событие (см. № 1 и № 3 выше). Если у обработчика события есть дополнительные операторы и/или функции обратного вызова, то анонимная функция должна быть обернута вокруг него, и применяется нормальный синтаксис:

B.

document.getElementById('thumb0').addEventListener("click", function(event) { 
  klikaj();
  console.log('clicked');
});

Более чистой альтернативой является добавление дополнительных строк в определение функции обратного вызова и регистрация таких событий, как #A.

Решение

Просто добавьте следующее утверждение в качестве последней строки klikaj():

this.style.pointerEvents = "none";

Это сделает выбранный тег не кликаемым. Применительно к OP-коду это должно быть так:

<div id="thumb0" class="thumbs">Thumb 0</div>
<script>
  function klikaj(event) {
    gtag('event', 'first-4', {
      'event_category' : 'cat-4',
      'event_label' : 'site'
    });
    this.style.pointerEvents = "none";   
  }

  document.getElementById('thumb0').addEventListener("click", klikaj);
</script>

Демо

Следующая демонстрация имеет две ссылки:

  1. .default - обычная ссылка, зарегистрированная на событие нажатия, которое при сработавшие звонки test()

  2. .once - ссылка, зарегистрированная на событие нажатия, которое при срабатывании вызывает test() и делает ссылку неактивной.

function test() {
  console.log('test');
}

document.querySelector('.default').onclick = function(e) {
  test();
}

document.querySelector('.once').onclick = function(e) {
  test();
  this.style.pointerEvents = 'none';
}
<a href='#/' class='default'>Default</a><br>
<a href='#/' class='once'>Once</a>

Ответ 5

Существует проблема с тем, как вы пытаетесь присоединить свою функцию-обработчик. Функция klikaj(i) возвращает undefined, поэтому вы добавляете неопределенное значение к кнопке. Если вы хотите выполнить klikaj(i) при нажатии кнопки, поместите его в замыкание следующим образом:

const button = document.querySelector('button')
const i = 10
function klikaj(i) {console.log('clicked once')}

button.addEventListener('click', () => { klikaj(i) }, {once: true})
<button>Hello world</button>

Ответ 6

Просто используйте переменную flag и установите ее при первом выполнении:

var handlerExecuted = false;
function clickHandler() {
  if (!handlerExecuted) {
    console.log("call gtag() here");
    handlerExecuted = true;
  } else {
    console.log("not calling gtag() function");
  }
}
document
  .getElementById("thumb0")
  .addEventListener("click", clickHandler);
<div id="thumb0" class="thumbs">My button</div>

Ответ 7

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

Чтобы запустить функцию gtag только один раз, вы можете изменить определение функции klikaj внутри самого тела функции. После первого вызова gtag никогда не будет вызываться.

Приведенный ниже код работает нормально.

<script>
    function klikaj(i) {
        gtag('event', 'first-4', {
            'event_category' : 'cat-4',
            'event_label' : 'site'
        });
        klikaj = function() {};
    }
</script>


<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">
    My button
</div>