堆棧內存溢出
  簡體   English   中英

帶有單擊功能的 addEventListener 不起作用

[英]addEventListener with click function not working

 原文  2019-12-13 19:52:41  7   1    javascript/ function/ click/ addeventlistener

問題描述

老實說，我很困惑，只是需要一些幫助。 我是在告訴我的代碼太長或太短，我只是想知道為什么我的addEventListener工作不喜歡我的第一個和IM剛剛失去，只是真的需要一些幫助除了人告訴我怎么寫我的代碼，而不是主要焦點，我已經嘗試重新編寫這個問題 4 次，已經嘗試修復我的代碼以獲得答案，我真的很沮喪！

第二次點擊功能不會運行，我不確定為什么。 第一個運行良好並執行應有的操作，但第二個應該允許用戶單擊出現的圓圈並顯示一個信息框，但是假設顯示所述信息框，我不會單擊任何內容！ 我沒有添加所有的html，屁股有很多路徑。 我很困惑為什么第一個 woukd 可以正常工作，而第二個卻沒有。

<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/

1 個解決方案

解決方案1
 0  2019-12-13 21:14:36

問題是#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指令處理所有元素的可見visibility: hidden 。

用petalBut檢查我的工作測試但petalBut移到這里： https : petalBut

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 按鈕單擊 addEventListener 在 window.addEventListener 加載函數中不起作用 addEventListener在點擊時不起作用 addEventListener 點擊事件不起作用 點擊時的 addEventListener 在 javascript 中不起作用 addEventListener 在第一次點擊時不起作用 單擊時addEventListener不起作用 addEventListener單擊無法正常工作 javascript addEventlistener“點擊”不工作 Javascript 中的 addEventListener“點擊”不起作用 addEventListener不會在單擊時觸發功能
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM