Добавить событие клика после другого события клика

Я пытаюсь добавить событие щелчка к документу в другом событии щелчка, прикрепленном к кнопке. Однако второе событие щелчка запускается сразу же, как если бы оно перекрывалось. Я пытался остановить распространение, используя таймаут, удаляя слушателя, preventDefault(), но у меня не было успеха.

Это пример того, что я пытаюсь сделать.

document.getElementById("test").addEventListener('click', first);

function first(){
    document.addEventListener('click', second);
}
function second(){
    alert("I'm not suppose to appear after the first click, only the second.");
}

Для тестирования я использую простую кнопку

<button type="button" id="test">Click</button>

Я делаю это без JQuery. Это возможно?

Ответ 1

Попробуйте использовать event.stopImmediatePropagation()

document.getElementById("test").addEventListener('click', first);

function first(e){
    e.stopImmediatePropagation();
    this.removeEventListener("click", first);
    document.onclick = second;
}
function second(){
    alert("I'm not suppose to appear after the first click, only the second.");
}

<button type="button" id="test">Click</button>

Ответ 2

Вы можете использовать переменную, которая подсчитывает количество кликов

document.getElementById("test").addEventListener('click', clickHandler);

var clickCount=0;
function clickHandler(event){
  clickCount++;
  if(clickCount==2){
    event.target.removeEventListener("click");
    document.addEventListener('click', function(){
      alert("I'm not suppose to appear after the first click, only the second.");
    });
  }
}

Если вы не хотите использовать глобальную переменную, вы можете использовать набор данных, создайте кнопку с этим:

<button type="button" id="test" data-clickcount="0">Click</button>

И используйте этот код:

document.getElementById("test").addEventListener('click', clickHandler);

function clickHandler(event){
  event.target.dataset.clickcount++;
  if(event.target.dataset.clickcount==2){
    event.target.removeEventListener("click");
    document.addEventListener('click', function(){
      alert("I'm not suppose to appear after the first click, only the second.");
    });
  }
}

Ответ 3

document.getElementById("test").addEventListener('click', first);

function first(e){
    e.stopImmediatePropagation();
    this.removeEventListener("click", first);
    document.onclick = second;
}
function second(){
    alert("I'm not suppose to appear after the first click, only the second.");
}

<button type="button" id="test">Click</button>