堆栈内存溢出
  繁体   English   中英

带有单击功能的 addEventListener 不起作用

[英]addEventListener with click function not working

 原文  2019-12-13 19:52:41  3   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