Heim > Web-Frontend > js-Tutorial > 阻止子元素的点击事件

阻止子元素的点击事件

PHPz
Freigeben: 2018-10-10 15:35:23
nach vorne
1579 Leute haben es durchsucht

问题描述:
今天在调试页面的时候遇到一个奇怪的现象,在一个父元素上面定义了一个点击事件,在父元素下面是一个一个的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(&#39;ul&#39;).css("display") == "none")
                $(this).children(&#39;ul&#39;).css("display","block");            else
                $(this).children(&#39;ul&#39;).css(&#39;display&#39;,"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>
Nach dem Login kopieren

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

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage