JS 循环绑定多个元素的点击事件时出现的闭包问题与解决方案

最新推荐文章于 2022-09-10 16:08:20 发布
VIP文章 最新推荐文章于 2022-09-10 16:08:20 发布
阅读量1.7k 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/inite/article/details/78648941
版权

      昨天在循环绑定多个a标签的点击事件时出现了不少问题，首先是 js 的典型闭包问题，这个还好以前也遇到过，于是很快解决了，但是在为多个a标签绑定点击事件成功之后，本来以为就大功告成了，结果居然是在页面加载时就自动全部a标签的点击事件自动触发了，很纳闷！！！至今还是没搞明白。测试后发现貌似是使用了闭包时才会导致此问题的发生，以下是自己写的一段建议的测试代码（仅为了说明问题而已，所以较为简陋！）：

<html>
	<body>
	  <input type="text" value="请点击下列的a标签" readonly="readonly"><br/>
	  <a href="javascript:void(0)" class="testA">1</a><br/>
	  <a href="javascript:void(0)" class="testA">2</a><br/>
	  <a href="javascript:void(0)" class="testA">3</a><br/>
	  <a href="javascript:void(0)" class="testA">4</a><br/>
	  <script type=&#
最低0.47元/天 解锁文章
yibin94
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 循环li添加点击事件 （闭包的应用）
11-28
废话不多说了，直接给大家贴代码了，具体代码如下所述： var aLi = document.querySelectorAll('.article-tab li'); for (var i = 0; i <= aLi.length; i++) { (function(){ var p = i aLi[i].onclick = function() { alert(p); } })(); } 以上所述是小编给大家介绍的JS 循环li添加点击事件 （闭包的应用），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的。
JavaScript 在回调函数中闭包保存循环index
weixin_30362083的博客
01-02 125
var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { (function (lockedInIndex) { elems[i].addEventListener('click', function (e) { ...
JS中创建10个a标签，点击弹出对应的序号
不想起床
02-02 1253
for (let i = 1; i <= 10; i++) { let a = document.createElement('a') a.innerHTML = i + '<br>' document.body.appendChild(a) a.addEventListener('click', functio...
JS—创建10个a标签，点击弹出相应1-10的序号
KongKong_Rac的博客
08-18 617
创建10个a标签，点击弹出相应1-10的序号 错误做法：弹出均为11，当触发事件时，for循环已经结束，i为11 let i, a; for (i = 1; i < 11; i++) { a = document.createElement('a'); a.innerHTML = i + '<br>'; a.addEventListener('click', function(e) { // 阻止默认行为 e.preventDefau
用JS创建10个＜a＞标签，点击的时候弹出来对应的序号
 我的博客
12-23 699
利用闭包的方式 for (var i = 0; i < 10; i++) { var aObj = document.createElement('a') aObj.innerText = 'a标签' + i aObj.onclick = (function (i) { return function () { alert(i) } })(i) document.body.appendChild(aObj) } 利用块级作用域的方式 for (
JS实现按钮被多次点击
Dilemma_me的博客
08-28 921
JS实现按钮被多次点击 var clicknum= 0; function button_onclick(Element){ if (clicknum== 0) { clicknum= 1; Element.disabled=true; // 等待3...
js循环添加事件的两种方法
jinxiaoning的博客
04-19 2509
js循环事件的两种方法
【javascript】js实现使用循环生成多个元素的点击事件
weixin_43559672的博客
09-10 1876
原生js实现循环生成多个button的点击事件，效果：按哪个按钮哪个按钮的背景变为粉色。
js 使用for 循环添加点击事件
qq_51999757的博客
09-12 3764
使用for循环添加点击事件时，获取i值的方法 比如页面上有一个ul，数个li，现在给li添加点击事件。 var li = document.getElementsByTagName("li"); 　　for(var i = 0; i < li.length; i++) { li[i].addEventListener("click",function () { console.log(i); }) } 但是，这样写之后我们发现，点击任何一个li，打印的值都为5，这是因为闭包中共用i值
js给具有多个class属性的元素添加点击事件
卫可冬的博客
12-23 4531
元素： <button class="c-btn query">查询</button> 方法1： $('.c-btn.query').click(function () { query(); } 方法2： $("body").on('click','.c-btn.query',function () { query(); }); 方法1有时候不奏效，可以选择方法2...
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
12-10
在JS中，你写一个for循环的时候，内部的循环变量I其实是会保存在它运行的函数或类内的，所以你会发现你给元素批量绑定事件的时候，出现i=最后一个循环变量的值，这就很坑爹啊，解决的方案有2钟， 思路就是：把这个...
javascript闭包传参和事件的循环绑定示例探讨
12-08
今天看到一个javascript的题目，按常理循环绑定事件，但是得到的结果却不是想要的。 代码如下: <a>text</a> <a>link</a> [removed] var as = document.getElementsByTagName(‘a’); for ( var i = as.length; ...
微信小程序闭包问题引发的JS闭包解决方案
03-29
作者：虫哥写代码，来自原文地址 看到标题“闭包”很多人会觉得懵逼包括我在内，之前对闭包有所听闻但始终无法准确全面的了解。...引入闭包解决方案；升华闭包概念理解。废话少说直接步入正题。   还原
利用 Javascript 实现上传图片并向服务器获取图片路径后显示的 demo
热门推荐
Inite的博客
10-21 2万+
由于某些特殊原因，有时需要从服务端请求到图片路径，需要给该接口传递对应图片的base64 dataURL，并且有时需要将其上传图片的类型统一为 jpeg 格式时，可采用以下方式。 HTM L代码如下： 请选择上传图片： JS 代码如下： var image = ''; var canvas; var
如何锁定 input 内容不可修改
Inite的博客
10-19 1万+
如何锁定input内容不可修改呢? 锁定value不可修改的方法可以用disabled属性.. 这个是input控件的基本属性 input type="text" disabled name="score" value="分数"/> 最好是 disabled="disabled" 如果你要获取这里的内容，但又不想被编辑，最好使用readonly，因为使用di
css3-transform-matrix 即矩阵实现物体旋转、缩放、移动效果
Inite的博客
01-07 3663
我想做个模拟地毯展开的动画效果，其侧面的圆卷要由大随着地毯展开而逐渐变小，并在此过程中需要滚动（旋转）；一开始在网上搜了旋转的代码，很简单的一个方法是利用 jQuery 的插件 jQueryRotate.2.2.js（其中一个版本），然后直接在 js 调用其中已经封装好的 Rotate(deg) 即可实现物体旋转的效果，结果当我为该物体加上 jQuery 的 animation 动画让其产生位置的
JSON (JavaScript Object Notation) 简述及读取
Inite的博客
01-07 2657
JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集。 数据在键值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数据的书写格式是：名称/值对。 名称/值对组合中的名称写在前面（在双引号中），值对写在后面(同样在双引号中)，中间用冒号隔开：
html的a标签绑定js,js实现为a标签添加事件的方法(使用闭包循环)
最新发布
05-27
可以使用JavaScript中的闭包和循环来为a标签添加事件。以下是示例代码： ```html <a href="#" id="link1">Link 1</a> <a href="#" id="link2">Link 2</a> <a href="#" id="link3">Link 3</a> <script> // 获取所有a标签 var links = document.getElementsByTagName("a"); // 循环遍历所有a标签 for (var i = 0; i < links.length; i++) { // 使用闭包和循环为每个a标签添加事件 (function(index) { links[index].addEventListener("click", function() { alert("You clicked link " + (index + 1)); }); })(i); } </script> ``` 在这个例子中，我们首先获取了所有的a标签。然后，使用一个for循环遍历了所有的a标签，并且使用了一个立即执行函数来创建一个闭包，将每个a标签的索引作为参数传递进去。在闭包中，我们使用addEventListener方法为每个a标签绑定了一个点击事件，当用户点击a标签时，会弹出一个包含该a标签索引的提示框。由于我们使用了闭包，所以每个a标签都有自己的索引值，不会出现循环结束后所有a标签都绑定了最后一个索引值的事件的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值