当我单击子 div 时如何关闭父 div 函数，当我再次单击父 div 时，该函数将活动

Question

我想让用户在单击我的网站背景图片（父 div）时访问某个网站，但是当用户单击我的网站内容（子 div）时需要关闭该功能，然后当用户单击背景图片（父 div）时关闭该功能再次，功能将是活动。

我尝试了很多次，但是当我单击我的网站内容（子div），然后再次单击网站背景图片（父div）时，该功能不起作用。

我能做什么？ 谢谢！

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>Test!</title>
    <style type="text/css">
        .head{
                background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
                text-align:center; padding:10px;
        }

        .tt{
               width:100%; height:100%;
               border:1px solid red;
        }

        .content{
                width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
                border:1px solid blue;
        }
    </style>
    <script type="text/javascript">
        function bgADlink(){
            window.open('https://www.google.com');
        }

        var i = 0;

        function test1(){
            if(i == 0 || i == 1)
                bgADlink();

            return i = 0;
        }

        function test2(){
            bgADlink=false;

            return i = 1;
        }
    </script>
    </head>
    <body style="margin:0px; background-color:#eeeeee;">
        <div class="head">Test</div>
        <div class="tt" onclick="test1()">
            <div class="content" onclick="test2()"></div>
        </div>
    </body>
</html>

Answer 1

您的代码中存在不同的问题。

因为事件从内部元素传播到它的父元素（不仅是父元素，而且是所有向上的层次结构），“tt”div 将始终触发，所以最好的办法是停止事件的传播

onclick="event.stopPropagation();test1()"

我真的不明白你想用“i”完成什么，为什么你有一个函数 bgADlink() 然后给它分配一个布尔值，JavaScript 允许你这样做，但基本上你的函数现在是一个布尔值。

我给你做了一个小样本提琴手，你可以看到 stopPropagation 工作，希望它有帮助。

https://jsfiddle.net/pimboden40/kg9wfdqj/29/

Answer 2

这个片段也没有打开父 div 链接..但是在 html 页面上使用它然后尝试它

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>Test!</title> <style type="text/css"> .head{ background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px; text-align:center; padding:10px; } .tt{ width:100%; height:100%; border:1px solid red; } .content{ width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue; border:1px solid blue; } </style> <script type="text/javascript"> var i = 0; function test1(){ if(i == 0 || i == 1) bgADlink(); return i = 0; } function test2(varr,event){ // bgADlink=false; event.stopPropagation(); return i = 1; } function bgADlink(){ console.log("bgADlink") window.open('https://www.google.com'); } </script> </head> <body style="margin:0px; background-color:#eeeeee;"> <div class="head">Test</div> <div class="tt" onclick="test1()"> <div class="content" onclick="test2('',event)"></div> </div> </body> </html>

Answer 3

我不确定这是你需要的，但基本上你需要停止从孩子到父母的事件冒泡。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"></meta>
            <title>Test!</title>
        <style type="text/css">
            .head{
                    background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
                    text-align:center; padding:10px;
            }

            .tt{
                   width:100%; height:100%;
                   border:1px solid red;
            }

            .content{
                    width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
                    border:1px solid blue;
            }
        </style>
        <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous"></script>
        <script type="text/javascript">
            function bgADlink(){
                window.open('https://www.google.com');
            }

            $(document).ready(function(){
             $(".tt").on("click",function(){
               bgADlink();
              });

              $(".content").on("click",function(e){
               e.stopPropagation();
              });
            });
        </script>
        </head>
        <body style="margin:0px; background-color:#eeeeee;">
            <div class="head">Test</div>
            <div class="tt" onclick="test1()">
                <div class="content" onclick="test2()"></div>
            </div>
        </body>
    </html>

Answer 4

只需删除 || i == 1 条件来自 test1() 函数，如下所示。

function test1(){
    if(i == 0)
        bgADlink();

    return i = 0;
}

检查这个小提琴https://jsfiddle.net/ca7Lbsy3/

当我单击子 div 时如何关闭父 div 函数，当我再次单击父 div 时，该函数将活动

问题描述

4 个解决方案

解决方案1
0 2019-01-04 11:14:45

解决方案2
0 2019-01-04 11:16:51

解决方案3
0 2019-01-04 11:18:41

解决方案4
0 已采纳 2019-01-04 11:18:44

当我单击子 div 时如何关闭父 div 函数，当我再次单击父 div 时，该函数将活动

问题描述

4 个解决方案

解决方案1 0 2019-01-04 11:14:45

解决方案2 0 2019-01-04 11:16:51

解决方案3 0 2019-01-04 11:18:41

解决方案4 0 已采纳 2019-01-04 11:18:44

解决方案1
0 2019-01-04 11:14:45

解决方案2
0 2019-01-04 11:16:51

解决方案3
0 2019-01-04 11:18:41

解决方案4
0 已采纳 2019-01-04 11:18:44