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

JavaScript问题描述：

项目需求：让js绑定的onclick事件只触发1次~，有哪些方法？

第 1 个答案：

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

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

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

第 2 个答案：

var flag = true;
$('div').on('click',function(){
    if(flag){
         //执行事件
        ......
        flag = false;
    }
})

可以封装一下多处使用

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

第 3 个答案：

用 jQuery 的话，可以用 .one()

$('div').one('click',function(){
//执行事件
............
})

第 4 个答案：

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

第 5 个答案：

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

第 6 个答案：

var kaiguan=1;
onclick=function(){
if(kaiguan){
  alert('执行第一次操作');
  kaiguan = 0;
}
}

第 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>

第 8 个答案：

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

第 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>