js中怎么让绑定的click事件只触发一次呢？

Question

项目需求 让js绑定的事件 只触发1次~

Answer 1

    var btn = document.getElementById('btn');
    // 添加事件绑定
    btn.addEventListener('click', btnClick, false);

    // 按钮点击方法
    function btnClick() {
      console.log('hello');
      // 删除事件绑定
      btn.removeEventListener('click', btnClick, false);
    }

个人建议点击以后删除绑定的事件才是最靠谱的

Answer 2

可以封装一下多处使用

function one(fn) {
    var flag = true;
    return function () {
        if (flag) {
            flag = false;
            fn.apply(this, arguments)
        }
    }
}

document.getElementById("btn").onclick = one(function(e) {
    console.log(e)
    console.log(this);
})

Answer 3

用 jQuery 的话，可以用 .one()，文档在此

Answer 4

<input type="button" value="按钮" />
<script>
document.querySelector('input[type="button"]').onclick = function() {
  alert(this.value);
  this.onclick = null;
};
</script>

Answer 5

var _ = true;
el.onclick = function() {
    if(!_) return;
    // your code
    _ = false;
}

Answer 6

var kaiguan=1;
onclick=function(){
if(kaiguan){

  alert('执行第一次操作');
  kaiguan = 0;

}
}

Answer 7

<button id="btn">按钮</button>
<script>
    function test () {
        if(this.clickTimes<1) {
            alert('点击第：【 ' + this.clickTimes + ' 】次');
            
            this.clickTimes++;
        }else {
            alert('已经点过一次了，不做任何操作');
        }
    }
    
    var oBtn = document.getElementById('btn');
    
    // 记录此按钮点击次数
    oBtn.clickTimes = 0;
    
    // 为此按钮绑定事件
    oBtn.onclick = test;
</script>

Answer 8

如果只是简单的点击一次后面就不执行click事件的话，可以设置个flag或者点击以后移除事件。如果你的需求是点击以后再次进入页面也不能点击执行了，这里最好就通过发请求，通过后端返回的数据来判断是否可以点击来进行控制。

Answer 9

<input type="button" id="btn" value="点击">

<script>
    function one(elm, event, fn) {
        function todo() {
            fn();
            elm.removeEventListener(event, todo);
        }
        elm.addEventListener(event, todo);
    }

    var btn = document.getElementById('btn');
    one(btn, 'click', function () {
        alert('只执行一次');
    })
</script>