为什么事件监听器需要两个元素？

【问题标题】：why does event Listener need two elements?为什么事件监听器需要两个元素？
【发布时间】：2021-10-20 07:46:52
【问题描述】：

在下面的代码中，您会注意到我有两个事件监听器

window.addEventListener("click", jump);
window.addEventListener("click", jump());

问题是删除其中任何一个会使事件侦听器无效，即它不起作用，它们都必须存在，我很难弄清楚原因。

注意：由于我还没有完成响应部分，所以点击跳转并在整页中查看 sn-p

const ball = document.querySelector(".ball");
const obs = document.querySelector(".obstacle");
const score = document.querySelector("#s");



let temp = 0; // a temporary variable to stop event listener from running as soon as game starts

function jump() {
  let bottom = parseInt(window.getComputedStyle(ball).getPropertyValue('bottom'));

  if (temp > 0 && bottom === 150) {
    ball.style.bottom = "400px";

    setTimeout(() => {
      ball.style.bottom = "150px";
    }, 300);
  }
  temp++;
}

window.addEventListener("click", jump);
window.addEventListener("click", jump());

let z = 0; // intitial score to be incremented by each succesful second

setInterval(() => {
  let ballX = parseInt(window.getComputedStyle(ball).getPropertyValue('bottom'));

  let obsY = parseInt(window.getComputedStyle(obs).getPropertyValue('right'));

  if (ballX >= 150 && ballX <= 240 && obsY >= 785 && obsY <= 970) {
    ball.style.animationPlayState = "paused";
    obs.style.animationPlayState = "paused";
    ball.style.bottom = `${ballX}px`
    window.removeEventListener("keydown", jump);
    clearInterval();
  } else {
    s.innerHTML = z;
    z += 1;
  }
}, 10);

window.onload = () => {
  if (screen.availHeight > screen.availWidth) {
    alert("This game is best played in landscape, so rotate your phone if you can :)");
  }
}
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen {
  margin: 20px;
  width: 1000px;
  height: 500px;
  background: skyblue;
  outline: solid 3px;
  position: absolute;
  overflow: hidden;
}

.score {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 200px;
  height: 50px;
  display: flex;
  align-items: flex-end;
  font-size: 150%;
  font-family: "Comic Neue";
  font-weight: bold;
}

.s {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 50px;
  text-shadow: 3px 3px 0px white;
}

#s-title {
  width: 40%;
}

#s {
  width: 60%;
}

.ball {
  position: absolute;
  left: 30px;
  bottom: 150px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: red;
  transition: bottom 0.3s ease-in-out;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(720deg);
  }
}

.obstacle {
  width: 100px;
  height: 100px;
  position: absolute;
  right: -150px;
  bottom: 150px;
  background: red;
  animation: attack 1.5s linear infinite;
  animation-play-state: running;
}

@keyframes attack {
  to {
    right: 1150px;
  }
}

.grass {
  position: absolute;
  bottom: 125px;
  width: 100%;
  height: 25px;
  background: rgb(55, 141, 52);
}

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 125px;
  background: rgb(82, 80, 69);
}
<!doctype html>
<html lang='en'>

<head>
  <!-- Required meta tags -->
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <title>Rollin</title>
  <link rel='stylesheet' href='rollin.css'>
  <link rel='icon' href='assets/logo.ico'>
</head>

<body>
  <div class="screen">
    <div class="score">
      <div id="s-title" class="s">Score:</div>
      <div id="s" class="s">000000</div>
    </div>
    <div class="ball">
      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
        viewBox="0 0 1024 1024" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
 <defs>
  <style type="text/css">
    .str0 {stroke:black;stroke-width:0.667;stroke-miterlimit:2.61313}
    .fil1 {fill:black}
    .fil2 {fill:#1A1A1A}
    .fil0 {fill:#AE0000}
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g>
   <path class="fil0" d="M517.231 11.182c277.954,0 503.28,225.327 503.28,503.281 0,277.954 -225.326,503.281 -503.28,503.281 -277.954,0 -503.281,-225.327 -503.281,-503.281 0,-277.954 225.327,-503.281 503.281,-503.281z"/>
   <path id="1" class="fil1" d="M517.231 11.182c277.954,0 503.28,225.327 503.28,503.281 0,277.954 -225.326,503.281 -503.28,503.281 -277.954,0 -503.281,-225.327 -503.281,-503.281 0,-277.954 225.327,-503.281 503.281,-503.281zm338.197 165.084c-86.55,-86.551 -206.121,-140.084 -338.197,-140.084 -132.076,0 -251.648,53.533 -338.198,140.084 -86.55,86.55 -140.083,206.121 -140.083,338.197 0,132.076 53.533,251.647 140.083,338.197 86.551,86.551 206.122,140.084 338.198,140.084 132.076,0 251.647,-53.533 338.197,-140.084 86.551,-86.55 140.083,-206.121 140.083,-338.197 0,-132.076 -53.532,-251.647 -140.083,-338.197z"/>
  </g>
  <g>
   <path class="fil2" d="M517.231 246.225c149.688,0 271.035,121.346 271.035,271.035 0,149.688 -121.347,271.035 -271.035,271.035 -149.689,0 -271.035,-121.347 -271.035,-271.035 0,-149.689 121.346,-271.035 271.035,-271.035zm184.58 86.454c-47.237,-47.237 -112.497,-76.454 -184.58,-76.454 -72.084,0 -137.343,29.217 -184.581,76.454 -47.237,47.238 -76.455,112.497 -76.455,184.581 0,72.083 29.218,137.343 76.455,184.58 47.238,47.237 112.497,76.455 184.581,76.455 72.083,0 137.343,-29.218 184.58,-76.455 47.237,-47.237 76.455,-112.497 76.455,-184.58 0,-72.084 -29.218,-137.343 -76.455,-184.581z"/>
  </g>
  <circle class="fil1 str0" cx="517.231" cy="517.26" r="100.656"/>
  <path class="fil1 str0" d="M213.398 645.876c-54.056,-27.029 -41.008,-69.901 -48.444,-92.065 -3.228,-9.623 -41.293,134.779 56.413,170.477 18.411,6.727 36.767,13.855 70.319,8.264 25.978,-4.33 61.512,-22.368 72.238,-53.613 12.934,-37.676 6.05,-56.363 -16.318,-82.46 -8.188,-9.553 -35.416,-37.28 -89.472,-20.504 -33.759,19.875 -36.584,43.161 -44.736,69.901z"/>
  <path class="fil1 str0" d="M561.667 188.198c52.09,-14.249 81.039,-0.564 103.952,4.079 9.948,2.016 -96.076,-103.15 -175.843,-36.384 -15.032,12.581 -30.384,24.914 -42.317,56.766 -9.24,24.663 -11.386,64.455 10.311,89.367 26.161,30.039 45.787,33.421 79.571,27.098 12.367,-2.315 49.994,-12.031 62.493,-67.234 -0.333,-39.173 -19.087,-53.263 -38.167,-73.692z"/>
  <path class="fil1 str0" d="M786.104 714.481c3.621,60.329 -40.031,70.465 -55.509,87.986 -6.72,7.607 137.369,-31.629 119.431,-134.093 -3.38,-19.308 -6.384,-38.769 -28.003,-65.031 -16.738,-20.332 -50.127,-42.086 -82.549,-35.753 -39.095,7.637 -51.837,22.942 -63.253,55.361 -4.179,11.868 -14.578,49.312 26.979,87.737 34.092,19.299 55.671,10.103 82.904,3.793z"/>
 </g>
</svg>


    </div>
    <div class="obstacle">
      <img src="assets/kakashi.png" alt="">
    </div>
    <div class="grass"></div>
    <div class="ground"></div>
  </div>

  <script src='rollin.js' defer></script>
</body>

</html>

【问题讨论】：

  • 您在代码中编写的window 中的两个事件（点击）侦听器都运行一个函数，因此删除一个与删除所有...
  • 第二个addEventListener 除了运行jump 函数之外什么都不做，它不返回任何东西（更不用说函数）来处理事件。
  • @phuzi 我明白了，但删除第二个也不能解决问题
  • 您是否尝试将window.addEventListener("click", jump()); 替换为jump();？这具有相同的效果。
  • 你有 let temp = 0; 所以条件 temp &gt; 0 显然忽略了第一次点击。由于您运行了一次jump，因此您增加了一次temp，因此下次点击不会被忽略。

标签： javascript html


【解决方案1】：

这怎么行？你可以在这里更好地尝试：JSFidlle

const ball = document.querySelector(".ball");
const obs = document.querySelector(".obstacle");
const score = document.querySelector("#s");



let temp = 0; // a temporary variable to stop event listener from running as soon as game starts

function jump() {
  let bottom = parseInt(window.getComputedStyle(ball).getPropertyValue('bottom'));

  if (temp > 0 && bottom === 150) {
    ball.style.bottom = "400px";

    setTimeout(() => {
      ball.style.bottom = "150px";
    }, 300);
  }
  temp++;
}

window.addEventListener("click", jump);

let z = 0; // intitial score to be incremented by each succesful second

setInterval(() => {
  let ballX = parseInt(window.getComputedStyle(ball).getPropertyValue('bottom'));

  let obsY = parseInt(window.getComputedStyle(obs).getPropertyValue('right'));

  if (ballX >= 150 && ballX <= 240 && obsY >= 785 && obsY <= 970) {
    ball.style.animationPlayState = "paused";
    obs.style.animationPlayState = "paused";
    ball.style.bottom = `${ballX}px`
    window.removeEventListener("keydown", jump);
    clearInterval();
  } else {
    s.innerHTML = z;
    z += 1;
  }
}, 10);

window.onload = () => {
  if (screen.availHeight > screen.availWidth) {
    alert("This game is best played in landscape, so rotate your phone if you can :)");
  }
}
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen {
  margin: 20px;
  width: 1000px;
  height: 500px;
  background: skyblue;
  outline: solid 3px;
  position: absolute;
  overflow: hidden;
}

.score {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 200px;
  height: 50px;
  display: flex;
  align-items: flex-end;
  font-size: 150%;
  font-family: "Comic Neue";
  font-weight: bold;
}

.s {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 50px;
  text-shadow: 3px 3px 0px white;
}

#s-title {
  width: 40%;
}

#s {
  width: 60%;
}

.ball {
  position: absolute;
  left: 30px;
  bottom: 150px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: red;
  transition: bottom 0.3s ease-in-out;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(720deg);
  }
}

.obstacle {
  width: 100px;
  height: 100px;
  position: absolute;
  right: -150px;
  bottom: 150px;
  background: red;
  animation: attack 1.5s linear infinite;
  animation-play-state: running;
}

@keyframes attack {
  to {
    right: 1150px;
  }
}

.grass {
  position: absolute;
  bottom: 125px;
  width: 100%;
  height: 25px;
  background: rgb(55, 141, 52);
}

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 125px;
  background: rgb(82, 80, 69);
}
<!doctype html>
<html lang='en'>

<head>
  <!-- Required meta tags -->
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <title>Rollin</title>
  <link rel='stylesheet' href='rollin.css'>
  <link rel='icon' href='assets/logo.ico'>
</head>

<body>
  <div class="screen">
    <div class="score">
      <div id="s-title" class="s">Score:</div>
      <div id="s" class="s">000000</div>
    </div>
    <div class="ball">
      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
        viewBox="0 0 1024 1024" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
 <defs>
  <style type="text/css">
    .str0 {stroke:black;stroke-width:0.667;stroke-miterlimit:2.61313}
    .fil1 {fill:black}
    .fil2 {fill:#1A1A1A}
    .fil0 {fill:#AE0000}
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g>
   <path class="fil0" d="M517.231 11.182c277.954,0 503.28,225.327 503.28,503.281 0,277.954 -225.326,503.281 -503.28,503.281 -277.954,0 -503.281,-225.327 -503.281,-503.281 0,-277.954 225.327,-503.281 503.281,-503.281z"/>
   <path id="1" class="fil1" d="M517.231 11.182c277.954,0 503.28,225.327 503.28,503.281 0,277.954 -225.326,503.281 -503.28,503.281 -277.954,0 -503.281,-225.327 -503.281,-503.281 0,-277.954 225.327,-503.281 503.281,-503.281zm338.197 165.084c-86.55,-86.551 -206.121,-140.084 -338.197,-140.084 -132.076,0 -251.648,53.533 -338.198,140.084 -86.55,86.55 -140.083,206.121 -140.083,338.197 0,132.076 53.533,251.647 140.083,338.197 86.551,86.551 206.122,140.084 338.198,140.084 132.076,0 251.647,-53.533 338.197,-140.084 86.551,-86.55 140.083,-206.121 140.083,-338.197 0,-132.076 -53.532,-251.647 -140.083,-338.197z"/>
  </g>
  <g>
   <path class="fil2" d="M517.231 246.225c149.688,0 271.035,121.346 271.035,271.035 0,149.688 -121.347,271.035 -271.035,271.035 -149.689,0 -271.035,-121.347 -271.035,-271.035 0,-149.689 121.346,-271.035 271.035,-271.035zm184.58 86.454c-47.237,-47.237 -112.497,-76.454 -184.58,-76.454 -72.084,0 -137.343,29.217 -184.581,76.454 -47.237,47.238 -76.455,112.497 -76.455,184.581 0,72.083 29.218,137.343 76.455,184.58 47.238,47.237 112.497,76.455 184.581,76.455 72.083,0 137.343,-29.218 184.58,-76.455 47.237,-47.237 76.455,-112.497 76.455,-184.58 0,-72.084 -29.218,-137.343 -76.455,-184.581z"/>
  </g>
  <circle class="fil1 str0" cx="517.231" cy="517.26" r="100.656"/>
  <path class="fil1 str0" d="M213.398 645.876c-54.056,-27.029 -41.008,-69.901 -48.444,-92.065 -3.228,-9.623 -41.293,134.779 56.413,170.477 18.411,6.727 36.767,13.855 70.319,8.264 25.978,-4.33 61.512,-22.368 72.238,-53.613 12.934,-37.676 6.05,-56.363 -16.318,-82.46 -8.188,-9.553 -35.416,-37.28 -89.472,-20.504 -33.759,19.875 -36.584,43.161 -44.736,69.901z"/>
  <path class="fil1 str0" d="M561.667 188.198c52.09,-14.249 81.039,-0.564 103.952,4.079 9.948,2.016 -96.076,-103.15 -175.843,-36.384 -15.032,12.581 -30.384,24.914 -42.317,56.766 -9.24,24.663 -11.386,64.455 10.311,89.367 26.161,30.039 45.787,33.421 79.571,27.098 12.367,-2.315 49.994,-12.031 62.493,-67.234 -0.333,-39.173 -19.087,-53.263 -38.167,-73.692z"/>
  <path class="fil1 str0" d="M786.104 714.481c3.621,60.329 -40.031,70.465 -55.509,87.986 -6.72,7.607 137.369,-31.629 119.431,-134.093 -3.38,-19.308 -6.384,-38.769 -28.003,-65.031 -16.738,-20.332 -50.127,-42.086 -82.549,-35.753 -39.095,7.637 -51.837,22.942 -63.253,55.361 -4.179,11.868 -14.578,49.312 26.979,87.737 34.092,19.299 55.671,10.103 82.904,3.793z"/>
 </g>
</svg>


    </div>
    <div class="obstacle">
      <img src="assets/kakashi.png" alt="">
    </div>
    <div class="grass"></div>
    <div class="ground"></div>
  </div>

  <script src='rollin.js' defer></script>
</body>

</html>

【讨论】：

  • 它对我不起作用
  • 它可以工作，您只需单击一次窗口即可开始工作。以任何方式调用 jump() 可以解决这个问题。
  • 我知道了，所以是因为 temp 值；谢谢
【解决方案2】：

您可以尝试将 -listener- 放在 -jump- 函数上方并移除：

-- window.addEventListener("click", jump()); --

【讨论】：

  • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
  • addEventListener 调用的位置会有什么不同？
猜你喜欢
  • 2021-06-02
  • 2021-03-17
  • 2019-09-25
  • 1970-01-01
  • 2012-12-04
  • 2022-01-17
  • 2017-04-16
  • 2016-03-19
  • 2022-12-19
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode