web-dev-qa-db-ja.com

別のクリックイベントの後にクリックイベントを追加する

ボタンに添付された別のクリックイベントで、ドキュメントにクリックイベントを追加しようとしています。ただし、2番目のクリックイベントは、イベントが重複しているかのようにすぐに発生します。タイムアウトを使用して伝播を停止し、リスナー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なしでこれを行っています。これは可能ですか？

javascriptonclickonclicklistenerdom-events
12
Alexander Weihmayer

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>
13
guest271314

クリック数を保持する変数を使用できます

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.");
    });
  }
}
1
valepu