欢迎光临
我们一直在努力

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>
赞(2) 打赏
未经允许不得转载:霍尼威尔旗下德派斯 » js中怎么让绑定的click事件只触发一次呢?
分享到

相关推荐

  • 暂无文章

评论 抢沙发

提供丰富的办公资源、学习文档下载

资源君致力于提供各种学习文档、办公资源下载,本站资源大部分均免费分享,部分精品资源付费,还请多多友情赞助,感谢大家的支持!
您要的资源,我们来提供。

联系我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册