如何在JS中调用函数而不调用父元素的函数

Question

如何让按钮消失在下面的例子中起作用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
</head>
<body>
    <div id="div1" style="height: 100px; background-color: red;" onclick="parent()">
        <button onclick="child()">disapear</button>
    </div>
    
    <script>
        function parent(elem) {
            document.getElementById("div1").style.display = "block";
        }
        function child(elem) {
            document.getElementById("div1").style.display = "none";
        }
    </script>
</body>
</html>

当我点击按钮消失时，我只想调用它的函数 - 即 child()。不是我点击 div

时的 parent() 函数

Answer 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
</head>
<body>
    <div id="div1" style="height: 100px; background-color: red;" onclick="parent(event)">
        <button onclick="child(event)">disapear</button>
    </div>
    
    <script>
        function parent(elem) {
            document.getElementById("div1").style.display = "block";
        }
        function child(elem) {
            elem.stopPropagation();
            document.getElementById("div1").style.display = "none";
        }
    </script>
</body>
</html>

如何在JS中调用函数而不调用父元素的函数

How to call a function in JS without calling the function of Parent element

javascript

function

dom-events

parent-child