js événement bouillonnant - facile à comprendre

① L'événement de l'élément parent empêche l'élément enfant de se déclencher et l'élément parent lie l'événement pour renvoyer false..
L'événement d'élément enfant empêche l'élément parent de se déclencher et l'élément enfant doit ajouter stopPropagation ().
Ce qui suit est un petit cas écrit par moi-même

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
        #one{
    
    width:400px;height:400px;background-color: red;}
        #two{
    
    width:200px;height:200px;background-color: green;}
        #three{
    
    width:50px;height:50px;background-color: blue;}
    </style>
</head>
<body>
    <div id="one">
        一区
        <div style="background-color: yellow;width:300px;height:300px;" id="test">子元素群
        <div id="two">二区
            <div id="three">三区</div>
        </div>
        </div>
    </div>
    <script>
        $("#one").click(function(e){
    
    
            console.log("one")
            return false
        })
        $("#two").click(function(e){
    
    
            console.log("two")
            return false
        })
        $("#three").click(function(e){
    
    
            e.stopPropagation()
            console.log("three")
        })
    </script>
</body>
</html>

J'étais stupide de penser que l'élément parent empêchera les événements des petits-enfants, arrière-petits-enfants, mais dans l'élément parent, l'élément enfant prend l'initiative e.stopPropagation (), de sorte que l'élément enfant ne sera pas affecté par l'événement de l'élément parent.

Je suppose que tu aimes

Origine blog.csdn.net/weixin_43939111/article/details/111862899
conseillé
Classement