井井客

搜索

label点击事件执行两次的问题

当懒得使用label标签for属性关联input标签时,可将label标签包围input标签也能达到相同效果,不过这样却会触发两次点击事件。

label点击事件执行两次的问题

问题代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>label点击事件执行两次的问题</title>
	</head>
	<body>
		<label><input type="checkbox" >点击我</label>
		<script>
			var labels = document.getElementsByTagName('label')[0];
			var i = 0;
			labels.onclick = function(event){
				alert('点击了'+i+'次');
				i++;
			}
		</script>
	</body>
</html>

触发两次点击事件的条件(这个是从网上摘来的):
(1)监听的是label和input的上层元素click事件
(2)label和input关联(for或者input在label下)

解决方法一:不使用label标签

使用div或者其它块级标签代替label,如果需要控制input的话,可以通过DOM来进行操作。

解决方法二:阻止默认事件(preventDefault)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>label点击事件执行两次的问题</title>
	</head>
	<body>
		<label><input type="checkbox">点击我</label>
		<script>
			var labels = document.getElementsByTagName('label')[0];
			var i = 0;
			labels.onclick = function(event){
				event.preventDefault();
				alert('点击了'+i+'次');
				i++;
			}
		</script>
	</body>
</html>

解决方法三:使用return

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>label点击事件执行两次的问题</title>
	</head>
	<body>
		<label><input type="checkbox">点击我</label>
		<script>
			var labels = document.getElementsByTagName('label')[0];
			var i = 0;
			labels.onclick = function(){
				alert('点击了'+i+'次');
				i++;
				return false;
			}
        </script>
	</body>
</html>

情况就是这样了~

文章TAG:JS

作者:井井客整理来源:原创
本文标题:label点击事件执行两次的问题
本文链接:/c/17193.html

上一篇:javascript五个实用小技巧
下一篇:CSS伪类实现文字颜色对半

文章分类

相关阅读

随便看看