JS事件只触发一次代码

相信熟悉的朋友都知道,JavaScript DOM事件是有很多的,我最常用的事件一般有:

  • onclick:当用户点击某个对象时调用的事件句柄
  • oninput:元素获取用户输入时触发
  • onblur:元素失去焦点时触发
  • onchange:该事件在表单元素的内容改变时触发
  • onfocus:元素获取焦点时触发

......

 

项目需求:

今天有项目有一个小需求,js点击事件只执行 一次,只触发一次,只绑定一次。通俗点讲,就是我点击了一次,再次点击的时候不让其再次触发。

 

实现原理

完全可以在触发一次过后删除触发事件函数。

 

JavaScript 事件只触发一次 代码示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>付杰博客JS单次触发代码示例</title>
</head>
<body>
<div id="fujieace">=== 点击这里触发 ===</div>
<script>
    document.getElementById("fujieace").onclick = f();
    function f() {
        alert('第一次触发!欢迎来到付杰博客:www.fujieace.com!');
        document.getElementById("fujieace").onclick = '';
    }
    </script>
</body>
</html>

 

jQuery 事件只触发一次 代码示例

jQuery专门为此功能提供了一个函数one。这样写就能让click这个事件只执行一次。

$("#btn3").one('click',function(){
alert('jQuey的one函数,第1次点击');
});

 

总结:

大家可以参考上面的两种代码自己做适当的修改,JS事件只执行一次最核心的东西我已经分享给大家了,如何灵活运用就看各位的悟性了。

    A+
发布日期:2021年03月26日 17:02:55  所属分类:JavaScript
最后更新时间:2021-03-26 17:06:35
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
Python数据分析与机器学习实战
  • ¥ 398.0元
  • 市场价:498.0元
Swoole项目实战(第二季)
  • ¥ 99.0元
  • 市场价:99.0元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 49.9元
  • 市场价:99.9元
PowerDesigner数据库设计与建模
  • ¥ 58元
  • 市场价:58元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: