petalBut

petalBut

关注
发信
关注(28)粉丝(399)

javascript - 具有click功能的addEventListener不起作用

我真的很困惑，只需要一些帮助。有人告诉我我的代码太长或太短，我只想知道为什么我的addeventlistener不能像我的第一个那样工作，而我只是迷路了，除了需要别人告诉我如何编写代码之外，我真的需要一些帮助主要焦点是，我已经尝试过4次重新编写此问题，试图修复我的代码以获得答案，而我却真的很沮丧！

第二次单击功能将无法运行，我不确定为什么。第一个可以正常运行并执行应有的操作，但是第二个应允许用户单击出现的圆圈并显示一个信息框，但是如果使该信息框出现，则不会单击任何东西！我没有添加所有的HTML屁股，但是有很多路径。我对第一个为什么会工作而第二个却没有工作感到困惑。





<head>

    <meta charset="UTF-8">
    <title>POLLENATORS PRESENTATION INFOGRAPHIC APP</title>

    <!-- main css -->
    <link href="css/main.css" rel="stylesheet" type="text/css">

    <!-- load jquery -->
    <script src="js/jquery-latest.min.js"></script>




</head>


<body>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1367 769">

        <title>pollen</title>

        <!-- BACKGROUND -->
        <g id="background">
</g>


        <!-- CLOUDS -->
        <g id="clouds">
</g>

        <!-- FLOWER ANIMATION AND CLICK -->
        <g id="flower">
</g>


        <!-- FLOWER PETAL INFO -->

         <g id="flowerPetal">
</g>


        <!-- FLOWER PETAL INFO BUTTON -->

    <g id="petalBut">
 </g>


        <!-- FLOWER LEAVES INFO -->

    <g id="flowerLeaves">
</g>


        <!-- FLOWER LEAVES INFO BUTTON -->

    <g id="leafBut">
</g>


        <!-- FLOWER FRUIT INFO -->

    <g id="flowerFruit">
</g>


        <!-- FLOWER FRUIT INFO BUTTON -->

    <g id="fruitBut">
</g>


        <!-- FLOWER STEM INFO -->

    <g id="flowerStem">
</g>


        <!-- FLOWER STEM INFO BUTTON -->
    <g id="stemBut">
</g>

        <!-- FLOWER SEEDS INFO -->
    <g id="flowerSeeds">
</g>


        <!-- FLOWR SEED INFO BUTTON -->

    <g id="seedBut">
</g>


        <!-- FLOWER ROOTS INFO -->

    <g id="flowerRoots">
</g>


        <!-- FLOWER ROOTS INFO BUTTON -->

    <g id="rootBut">
</g>


        <!-- BEE ANIMATION -->
        <g id="bee">
</g>


        <!-- BAT ANIMATION -->

        <g id="bat">
</g>


        <!-- BUTTERFLY ANIMATION -->

        <g id="butterfly">
</g>


        <!-- TEXT SPEECH -->

        <g id="textSpeech">
</g>


        <!-- SPIDER ANIMATION AND CLICK -->

        <g id="spider">
</g>


        <!-- MAIN FLOWER INFO -->

        <g id="flowerInfo">
</g>


        <!-- SNAIL ANIMATION -->
        <g id="snail">
</g>

        <!-- CLICK FLOWER INSTRUCTIONS -->
        <g id="clickFlower">
</g>


        <!-- TEXT SPEECH 1 -->

        <g id="textSpeech1">
</g>


        <!-- TEXT SPEECH 2 -->
        <g id="textSpeech2">
 </g>



        <!-- TEXT SPEECH 3 -->

        <g id="textSpeech3">
            </g>


        <!-- TEXT SPEECH 4 -->
        <g id="textSpeech4">
            </g>


        <!-- TEXT SPEECH 5 -->
        <g id="textSpeech5">
</g>


        <!-- TEXT SPEECH 6 -->
        <g id="textSpeech6">
</g>

        <!-- TEXT SPEECH 7 -->
        <g id="textSpeech7">
</g>

    </svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>





window.onload = function ()
{
    "use strict"



    var myBee = document.getElementById('bee');

    var myBat = document.getElementById('bat');

    var mySpider = document.getElementById('spider');

    var myFlower = document.getElementById('flower');

    var flowerPetal = document.getElementById('flowerPetal');

    var petalButton = document.getElementById('petalBut');

    var flowerLeaves = document.getElementById('flowerLeaves');

    var leafButton = document.getElementById('leafBut');

    var flowerFruit = document.getElementById('flowerFruit');

    var fruitBut = document.getElementById('fruitBut');


    var flowerStem = document.getElementById('flowerStem');

    var stemBut = document.getElementById('stemBut');

    var flowerSeeds = document.getElementById('flowerSeeds');

    var seedBut = document.getElementById('seedBut');

    var flowerRoots = document.getElementById('flowerRoots');

    var rootBut = document.getElementById('rootBut');

    var mySnail = document.getElementById('snail');

    var myButter = document.getElementById('butterfly');

    var textSpeech = document.getElementById('textSpeech');

    var textSpeech1 = document.getElementById('textSpeech1');

    var textSpeech2 = document.getElementById('textSpeech2');

    var textSpeech3 = document.getElementById('textSpeech3');

    var textSpeech4 = document.getElementById('textSpeech4');

    var textSpeech5 = document.getElementById('textSpeech5');

    var textSpeech6 = document.getElementById('textSpeech6');

    var textSpeech7 = document.getElementById('textSpeech7');

    var flowerClick = document.getElementById('clickFlower');

    var flowerInfo = document.getElementById('flowerInfo');






    TweenMax.to(myBee, 0, {
        opacity: 0
    });


    TweenMax.to(myFlower, 0, {
        opacity: 0
    });

    TweenMax.to(flowerPetal, 0, {
        opacity: 0
    });


    TweenMax.to(petalButton, 0, {
        opacity: 0
    });


    TweenMax.to(flowerLeaves, 0, {
        opacity: 0
    });


    TweenMax.to(leafButton, 0, {
        opacity: 0
    });


    TweenMax.to(flowerFruit, 0, {
        opacity: 0
    });

    TweenMax.to(fruitBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerStem, 0, {
        opacity: 0
    });

    TweenMax.to(stemBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerSeeds, 0, {
        opacity: 0
    });

    TweenMax.to(seedBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerRoots, 0, {
        opacity: 0
    });

    TweenMax.to(rootBut, 0, {
        opacity: 0
    });

    TweenMax.to(myBat, 0, {
        opacity: 0
    });

    TweenMax.to(myButter, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech1, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech2, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech3, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech4, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech5, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech6, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech7, 0, {
        opacity: 0
    });

    TweenMax.to(flowerClick, 0, {
        opacity: 0
    });


    TweenMax.to(mySnail, 0, {
        opacity: 0
    });


    TweenMax.from(mySpider, 4, {
        y: -100
    });

    TweenMax.to(mySpider, 4, {
        y: 0
    });

    TweenMax.from(flowerInfo, 4, {
        y: -100
    });

    TweenMax.to(flowerInfo, 4, {
        y: 0
    });


    mySpider.addEventListener("click", function () {

        TweenMax.to(mySpider, 3, {
            opacity: 0
        });

        TweenMax.to(flowerInfo, 3, {
            opacity: 0
        });

        TweenMax.from(myFlower, 3, {
            y: 800

        });

        TweenMax.to(myFlower, 3, {
            y: -10,
            opacity: 1

        });

        TweenMax.from(mySnail, 3, {
            x: 300,
            opacity: 1,
            delay: 2

        });

        TweenMax.to(mySnail, 3, {
            x: 20,
            opacity: 1,
            delay: 2

        });

        TweenMax.from(flowerClick, 3, {

            opacity: 0,
            delay: 3

        });

        TweenMax.to(flowerClick, 3, {

            opacity: 1,
            delay: 3

        });


        TweenMax.to(petalButton, 3, {

            opacity: 1,
            delay: 3.5,
            x: 75
        });
        TweenMax.to(leafButton, 3, {

            opacity: 1,
            delay: 3.5,
            x: 50
        });

        TweenMax.to(rootBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 100
        });

        TweenMax.to(fruitBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 100
        });

        TweenMax.to(seedBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 30
        });

        TweenMax.to(stemBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 40
        });


    });

    petalButton.addEventListener("click", function () {

        TweenMax.to(flowerPetal, 3, {
            opacity: 1
        });
    });






};


更多代码
https://jsfiddle.net/o589zmqk/

最佳答案

问题是#petalBut在所有#textSpeech*和#butterfly和#flowerInfo元素下面的堆栈中。这些元素不是隐藏的而是仅由opacity: 0表示，这意味着它们是不可见的但不是隐藏的，因此将处理所有单击事件，并且这些单击事件不会传播到#petalBut，因为它不是以下任何元素的子元素或父元素这些。

您的情况下的“脏”解决方案是将#petalBut移到SVG堆栈的末尾，如下所示：

  ...

  <!-- TEXT SPEECH 7 -->
  <g id="textSpeech7">
    <path .../>
  </g>

  <!-- FLOWER PETAL INFO BUTTON -->
  <g id="petalBut">
    <circle cx="439" cy="236" r="29" style="fill:#c1272d;stroke:#000;stroke-miterlimit:10;opacity:0.64"/>
  </g>

</svg>


正确的方法是使用visibility: hidden / visibility: visible或display: none / display: block CSS指令处理所有元素的可见性。

检查我的工作测试，将petalBut移到最后：https://zikro.gr/dbg/so/59328981

07-24 18:18
Powered by LMLPHP ©2024 petalBut 0.033086