昨天在做项目的时候突然遇到一个坑,就是给label绑定一个click事件之后,点击触发事件,竟然会触发两次,瞬间就懵逼了,当时的表情是这样的
纠结了1个多小时,一直以为是有绑定了相应的表单事件,所以造成冒泡,才会触发两次,但是调试了很久,还是没有找到有绑定的事件,于是当时的表当又变成这样了。
闲话少说,上
田园马如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
</style>
</head>
<body>
<div class="ob">
<label>
输入值:
<input type="radio" class="ip" placeholder="输入值">
</label>
</div>
<script>
var ob = document.querySelector(".ob label");
var ip = ob.querySelector(".ip");
ob.onclick = function(){
alert("我触发了。");
}
ip.onclick = function(){
alert("我是表单元素被触发了。")
}
</script>
</body>
</html>
然后你会发现,点击label(不是点击里面表单元素),则会弹出两次 alert(“我触发了。”);
此时是不是瞬间觉得崩溃有种想吐血的感觉?
不过当你删除掉label里面的表单元素的时候又会发现只会弹出一个alert(“我触发了。”);
昨天就是遇到这样的情况,然后心里面就突然想到了一个词“冒泡“,于是就有下面的野马:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
</style>
</head>
<body>
<div class="ob">
<label>
输入值:
<input type="radio" class="ip" placeholder="输入值">
</label>
</div>
<script>
var ob = document.querySelector(".ob label");
var ip = ob.querySelector(".ip");
ob.onclick = function(){
alert("我触发了。");
}
ip.onclick = function(){
alert("我是表单元素被触发了。")
}
//阻止冒泡
ip.onclick = function(e){
e = e || window.event;
e.stopPropagation();
}
</script>
</body>
</html>
然后发现竟然没有触发两次了,当时的我的心情是这样的。