css 不可点击-防止子元素上的点击风暴

bendan520 2023年8月26日 css 0

问题描述：

点击可透明壁纸_css 不可点击_点击可以透视的壁纸

今天在调试页面的时候，遇到了一个奇怪的现象。 在一个父元素前面定义了一个点击风暴，并且在父元素下面还有一一li标签。 前面没有点击风暴。 现象是css 不可点击，当点击其中一个 li 标签时，就会发生一些操作。

css 不可点击_点击可以透视的壁纸_点击可透明壁纸

这个问题困扰了我很长时间。 我把代码翻了好几遍，最后确定点击子元素也会触发父元素的风暴。 当时我把这些现象定义为父元素上的点击风暴时，点击风暴其实就是定义在这个区域的，所以当你点击子元素的时候，其实就是点击了父元素。

点击可以透视的壁纸_点击可透明壁纸_css 不可点击

但更科学的解释是：如果子元素被点击时子元素中没有点击风暴，那么点击风暴就会手动冒泡到父元素，直到找到可以处理点击风暴的函数。

点击可透明壁纸_css 不可点击_点击可以透视的壁纸

这些解释能够带来的好处是，有一种方法可以屏蔽这种现象，即阻止点击风暴冒泡。 对于 jQuery，它是 stopPropagation()。 对于下面的代码，你可以尝试一下css 不可点击，如果stopPropagation和stopPropagation没有区别的话。

代码如下所示：


<html>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<link rel="stylesheet" type="text/css" href="">
<script src="./jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript">
    $(function() {
        $("#maindiv").click(function(event) {
            if($(this).children('ul').css("display") == "none")
                $(this).children('ul').css("display","block");
            else
                $(this).children('ul').css('display',"none");
        }); 
        //阻止向上冒泡
        $("#maindiv > ul").click(function(event) {
            event.stopPropagation();
        });
    });
</script>
<title>测试如何屏蔽子元素的事件</title>
<body>
    <div id="maindiv">
        <button>click me</button>
        <ul style="display:none">
            <li>first</li>
            <li>second</li>
            <li>third</li>
        </ul>
    </div>
</body>
</html>