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 个答案: