父元素事件中禁止子元素的事件

最新推荐文章于 2023-09-30 22:21:08 发布

紫沐星

最新推荐文章于 2023-09-30 22:21:08 发布

阅读量1.3k

点赞数

分类专栏： JS 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/zimuxin/article/details/100976694

版权

JS 专栏收录该内容

16 篇文章

订阅专栏

今天有同事过来找我，，，input checkbox 区域太小了，想在外层TD上加上点击事件，但发现TD加了后，，，input也在里面，会被执行两次，记录一下，我写的DOME

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>福利社</title>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>
<table><tr><td style="border: 1px solid #ff0000; width: 200px; height: 200px;"><input type="checkbox"> </td><td></td></tr></table>
<script>

    $(function () {
        $(document).on("click", "td:first", function(event){
            var input  =$(this).find("input");
            input.click();
            event.stopImmediatePropagation();
        });
        $(document).on("click", "td:first input", function(event){
            event.stopPropagation();// 阻止事件冒泡
        });
    });

</script>
</body>
</html>