Question

我可能在这里丢失了我的弹珠，但我觉得这是非常简单的JavaScript。出于某种原因，对#recipes元素的第一个addEventListener调用是在第一个和第二个事件处理程序中触发语句，而第二个事件处理程序根本不工作。

var recipes = document.getElementById('recipes');
var close_heart = document.getElementById('close_heart');
var recipes_container = document.getElementById('recipes_container');

recipes.addEventListener('click', function(){
  recipes_container.style.display = 'block';
});

close_heart.addEventListener('click', function(){
  recipes_container.style.display = 'none';
});

<div id="recipes"><a href="#" id="close_heart"><span>Recipes</span></a></div>
  <section id="recipes_container"><a href="#" class="fa fa-gittip"></a>
    <h1>Real Mac &amp; Cheese</h1>
      <ul>
        <li>Rule #1 &ndash; Use only real cheese (no powdered cheese ever!)</li>
        <li>Rule #2 &ndash; Use multiple cheese-type varieties (ex: sharp cheddar, monterey jack, bleu)</li>
        <li>Rule #3 &ndash; Choose an extra protein like bacon to liven it up!</li>
      </ul>
  </section>
</div>

谢谢。

Answer 1

如果没有您的HTML，我只能推测，但我愿意打赌您遇到的事件就是冒泡。

#recipes可能会封装#close_heart，click上的#close_heart会冒出来并触发click的{{1}}事件处理程序

您可以使用 .stopPropagation() 来解决此问题。它将阻止事件冒泡DOM并在父元素上触发#recipes事件处理程序。

click

这是另一个StackOverflow问题，其中包含有关事件捕获和事件冒泡的有用说明：What is event bubbling and capturing?

修改：现在您已经包含了HTML，我发现这确实是一个问题。

Answer 2

我只是放错了id属性。 close_heart id应该放在嵌套在该部分中的anchor元素中。

Answer 3

也许您缺少为元素分配正确的ID。检查以下代码，它也适用于您的情况：

<html>
    <head>
        <title> The Title </title>
    </head>
    <body>

        <button id="recipes"> Recipes </button>
        <button id="close_heart"> Close_heart </button>
        <h1 id="recipes_container"> Recipes Container </h1>

        <script>
            var recipes = document.getElementById('recipes');
            var close_heart = document.getElementById('close_heart');
            var recipes_container = 
            document.getElementById('recipes_container');

            recipes.addEventListener('click', function(){
                recipes_container.style.color = "blue";
           });

           close_heart.addEventListener('click', function(){
               recipes_container.style.color = "orange";
           });
        </script>
    </body>
</html>

两个不同元素上的两个addEventListener函数

3 个答案: