Javascript - 在另一个点击事件后添加点击事件

时间:2015-10-21 14:37:19

标签: javascript javascript-events onclick onclicklistener dom-events

我正在尝试在附加到按钮的另一个点击事件中向文档添加点击事件。但是,第二次单击事件会立即触发,就像事件重叠一样。我考虑停止传播,使用超时,删除监听器,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的情况下这样做。这可能吗?

2 个答案:

答案 0 :(得分:13)

尝试使用event.stopImmediatePropagation()

&#13;
&#13;
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.");
}
&#13;
<button type="button" id="test">Click</button>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用一个保持点击次数的变量

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