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

最新推荐文章于 2021-12-30 15:30:55 发布

#麻辣小龙虾#

最新推荐文章于 2021-12-30 15:30:55 发布

阅读量883

点赞数 1

分类专栏： javascript web前端 html

本文链接：https://blog.csdn.net/CodingNoob/article/details/74027693

版权

web前端同时被 3 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

90 篇文章 1 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
label绑定click事件也会触发所包含内部表单的click事件，你踩过坑吗？

昨天在做项目的时候突然遇到一个坑，就是给label绑定一个click事件之后，点击触发事件，竟然会触发两次，瞬间就懵逼了，当时的表情是这样的纠结了1个多小时，一直以为是有绑定了相应的表单事件，所以造成冒泡，才会触发两次，但是调试了很久，还是没有找到有绑定的事件，于是当时的表当又变成这样了。闲话少说，上田园马如下所示：<!DOCTYPE html><html lang="en"><head
复制链接

扫一扫

专栏目录