首页 / JAVASCRIPT / 阻止子元素的点击事件

阻止子元素的点击事件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了阻止子元素的点击事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1489字，纯文字阅读大概需要3分钟。

内容图文

问题描述：
今天在调试页面的时候遇到一个奇怪的现象，在一个父元素上面定义了一个点击事件，在父元素下面是一个一个的li标签，这上面没有任何点击事件。现象是当点击其中一个li标签时会发生一些动作。

这个问题困惑了我好久，我对代码翻了好几遍，最后才确定是，点击子元素时也将会触发父元素的事件。当时我把这种现象是在父元素上定义点击事件时，实际上是在这个区域中都定义了点击事件，所以当点击子元素时，实际上也是在点击父元素。

但是更科学的解释是：如果在点击子元素时，如果子元素中没有点击事件，那么该点击事件将自动冒泡到父元素，直到能找到一个可以处理点击事件的函数。

那这种解释可以带来的好处是，可以有方法来屏蔽这种现象，那就是阻止点击事件的冒泡。对于jQuery而言，就是stopPropagation().对于下面的代码而言，大家可以尝试下，如果没有stopPropagation和有stopPropagation之间的差别。

代码如下：

<!DOCTYPE html><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() {
        $("#mainp").click(function(event) {
            if($(this).children('ul').css("display") == "none")
                $(this).children('ul').css("display","block");            else
                $(this).children('ul').css('display',"none");
        }); 
        //阻止向上冒泡
        $("#mainp > ul").click(function(event) {
            event.stopPropagation();
        });
    });</script><title>测试如何屏蔽子元素的事件</title><body>
    <p id="mainp">
        <button>click me</button>
        <ul style="display:none">
            <li>first</li>
            <li>second</li>
            <li>third</li>
        </ul>
    </p></body></html>

更多相关教程请访问 JavaScript视频教程

内容总结

以上是互联网集市为您收集整理的阻止子元素的点击事件全部内容，希望文章能够帮你解决阻止子元素的点击事件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/306650.html

来源：【匿名】