JavaScript ES6之前的隐藏bug

最新推荐文章于 2022-05-07 15:46:03 发布

码匠菜鸟

最新推荐文章于 2022-05-07 15:46:03 发布

阅读量198

点赞数

文章标签： javascript html js html5 es6

本文链接：https://blog.csdn.net/qq_35564123/article/details/106425825

版权

最近在学习前端相关的知识，对于JS的语法也是有了一定程度的了解。其中发现了一个比较有意思的bug，便记录下来。

相关代码贴在文末！

首先在html中写5个按钮，并在其内添加多选框，具体的可以参考文末的代码，当我在使用for循环对这些按钮进行遍历设置点击事件监听的时候，发现页面上的按钮怎么也点不动，毫无反应，如下图所示：

在这里插入图片描述

这是为什么呢？其实原因也很简单，我这里是写了5个按钮，那么 allButtons.length的值为5，如下图代码所示，当循环结束的时候，代码给第5个button设置了点击事件，此时的 i=4 ，循环结束，但结束后的 i 并没有像Java中那样被回收掉，因为 var 变量是全局变量，所以当点击事件触发的时候，程序会将点击时候的 i 的值赋值给代码块引用的地方，也就是 i=5 ，这个时候在按照下标去获取数组中的button对象是找不到的。（如果使用浏览器调试的话就会看到，当你点击按钮的时候，这个时候的button是undifined）

知道问题的原因了，要怎么解决呢？这里先说说ES6的新语法，let关键字，这个关键字代表的是变量是局部变量，也就是变量所在的代码块执行完毕就会类似Java被回收掉。如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGY6lLwg-1590735892476)(https://i.loli.net/2020/05/29/bWZSk23F6gRKp9w.png)]

这个时候刷新页面，点击button是正常的。

兼容ES5的解决办法

但是，这是使用了新语法，如果浏览器不支持新语法怎么办呢？总不能怪别人的浏览器吧？优秀的程序员一定是会不断的去完善自己的代码的，所以就有了第二种方法：传参。其实有过Android开发经验的都知道，点击事件是会默认传参的，只不过传的是点击对象。其实JS中的这个点击事件也是可以传参的，只不过传的是evt 也就是事件对象，但是在事件对象中是包含了一个你点击的对象的（button对象），所以就可以像下面👇这样解决这个问题了。刷新页面后的效果和上面的方法是一样的。

附完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ES5_Bug</title>
		<style type="text/css">
			button {
				background-color: red;
				border-radius: 0;
				border-width: 0;
				width: 100px;
				height: 30px;
				outline: none;
			}

			#buttons {
				width: 600px;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div id="buttons">
			<button><input type="checkbox" disabled>value1</button>
			<button><input type="checkbox" disabled>value2</button>
			<button><input type="checkbox" disabled>value3</button>
			<button><input type="checkbox" disabled>value4</button>
			<button><input type="checkbox" disabled>value5</button>
		</div>

		<script type="text/javascript">
			const allButtons = document.querySelectorAll('#buttons>button')
			for (var i = 0; i < allButtons.length; i++) {
				allButtons[i].addEventListener('click', (evt) => {
					//这里使用i会触发隐藏bug，由于for循环里的i是var全局变量，在事件赋值完毕后i的值会继续加1并在回调中使用
					// var checkbox = allButtons[i].firstChild
					var checkbox = evt.target.firstChild
					checkbox.checked = !checkbox.checked
					evt.target.style.backgroundColor = checkbox.checked ? 'green' : 'red'
				})
			}
		</script>
	</body>
</html>

码匠菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript ES6之前的隐藏bug

最近在学习前端相关的知识，对于JS的语法也是有了一定程度的了解。其中发现了一个比较有意思的bug，便记录下来。相关代码贴在文末！首先在html中写5个按钮，并在其内添加多选框，具体的可以参考文末的代码，当我在使用for循环对这些按钮进行遍历设置点击事件监听的时候，发现页面上的按钮怎么也点不动，毫无反应，如下图所示：这是为什么呢？其实原因也很简单，我这里是写了5个按钮，那么 allButtons.length的值为5，如下图代码所示，当循环结束的时候，代码给第5个button设置了点击事件，此时的
复制链接

扫一扫