label绑定click事件也会触发所包含内部表单的click事件，你踩过坑吗？

来源：互联网发布：朝鲜官二代知乎编辑：程序博客网时间：2024/05/17 07:58

昨天在做项目的时候突然遇到一个坑，就是给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>

然后发现竟然没有触发两次了，当时的我的心情是这样的。

这里写图片描述

阅读全文

1 0