Как закрыть родительскую функцию div, когда я щелкнул дочерний div и когда я снова нажал родительский div, функция будет активна - PullRequest
Новая
       6

Как закрыть родительскую функцию div, когда я щелкнул дочерний div и когда я снова нажал родительский div, функция будет активна

0 голосов
/ 04 января 2019

Я хочу разрешить пользователю перейти на какой-либо веб-сайт, когда он щелкнул фоновое изображение моего веб-сайта (родительский раздел), но эту функцию необходимо закрыть, когда пользователь щелкнул содержимое моего веб-сайта (дочерний блок), а затем, когда пользователь щелкнул фоновое изображение (снова родительский 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>

Ответы [ 4 ]

0 голосов
/ 04 января 2019

просто удали это || я == 1 условие из функции test1 (), как показано ниже. 

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

    return i = 0;
}

проверить эту скрипку https://jsfiddle.net/ca7Lbsy3/

0 голосов
/ 04 января 2019

этот фрагмент также не открывает родительскую ссылку 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>
0 голосов
/ 04 января 2019

Я не уверен, что это то, что вам нужно, но в основном вам нужно остановить всплытие событий от потомка к родителю.

<!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>
0 голосов
/ 04 января 2019

В вашем коде есть разные проблемы.

Поскольку события распространяются от внутреннего элемента к его родительскому элементу (не только родительскому, но и ко всей иерархии), всегда будет срабатывать div "tt", поэтому лучше всего остановить распространениесобытия с 

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

Я не совсем понимаю, что вы пытаетесь выполнить с помощью «i» и почему у вас есть функция bgADlink (), а затем назначается логическое значение, JavaScript позволяет вам делатьэто, но в основном ваша функция теперь является логическим значением.

Я сделал вам небольшой пример скрипача, вы можете видеть, как работает stopPropagation, надеюсь, это поможет.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...