Fatal编程技术网
  • javascript/
  • Javascript 具有单击功能的addEventListener不工作

Javascript 具有单击功能的addEventListener不工作

javascript function

Javascript 具有单击功能的addEventListener不工作,javascript,function,click,addeventlistener,Javascript,Function,Click,Addeventlistener,我真的很困惑，只是需要一些帮助。我被告知我的代码太长或太短，我只想知道为什么我的addeventlistener不能像我的第一个一样工作，我只是迷路了，除了人们告诉我如何编写代码而不是主要关注点之外，我真的需要一些帮助，我已经试过4次重新写这个问题了，我已经试着修改我的代码来得到答案，我真的很沮丧 第二次点击功能不会运行，我不确定为什么。第一个运行良好，并做它应该做的，但第二个应该允许用户点击出现的圆圈，并有一个信息框显示，但没有任何东西会点击im假设使上述信息框出现！我没有添加所有的html，

我真的很困惑，只是需要一些帮助。我被告知我的代码太长或太短，我只想知道为什么我的addeventlistener不能像我的第一个一样工作，我只是迷路了，除了人们告诉我如何编写代码而不是主要关注点之外，我真的需要一些帮助，我已经试过4次重新写这个问题了，我已经试着修改我的代码来得到答案，我真的很沮丧

第二次点击功能不会运行，我不确定为什么。第一个运行良好，并做它应该做的，但第二个应该允许用户点击出现的圆圈，并有一个信息框显示，但没有任何东西会点击im假设使上述信息框出现！我没有添加所有的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>

更多代码
问题在于
#petalBut
在所有
#textSpeech*
和
#butterfly
和
#flowerInfo
元素的下面堆叠。这些元素不是隐藏的，只是具有
不透明度：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>

。。。
正确的方法是使用
可见性：隐藏
/
可见性：可见
或
显示：无
/
显示：块
CSS指令处理所有元素的可见性

使用
petalBut检查我的工作测试，但在此处末尾移动了
：


  ...

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