[问题探讨]多元素同id时的事件绑定_onclick html 存多个id

作者：小丑西瓜9 | 2024-03-06 10:14:01

踩

onclick html 存多个id

问题分析：

id作为识别元素的唯一标识，从语义上讲不应该出现共用现象，实际操作中如果有多个元素共用id也会造成意料之外的问题。
项目结构简单时，这样的错误一般不会出现，但是在结构复杂，又有大量重复功能出现时容易出现id重复现象。
实际操作中，今天有发现一个功能异常，A处和B处功能相同，而且A和B的父页面默认隐藏，都通过对应的点击事件触发弹窗显示，A处和B处的功能时好时坏，最终排查为id重复导致的，项目代码因为不能放出来，所以写了如下小demo来展示这个问题。

问题答案：

多元素同id时的事件绑定只在第一个元素生效

示例代码：

<html lang="zh-en">
    <head>
    </head>
    <body>
	      <div id="tom">tom1</div>
	      <div id="tom">tom2</div>
	      <div id="tom">tom3</div>      
	      <script>
				var tom =  document.getElementById('tom');
	        	tom.onclick = function() {
	            	console.log(tom); 
	            	// 点击tom1时输出 <div id="tom">tom1</div>
	            	// 其他两个元素不触发该事件
	        	}
	      </script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/197831