Javascript addEventListener 只运行一次
Posted
技术标签:
【中文标题】Javascript addEventListener 只运行一次【英文标题】：Javascript addEventListener runs only once 【发布时间】：2018-07-06 02:52:12 【问题描述】：我一直在尝试构建一个非常简单的网站，该网站会在用户点击 UI 中表示的建筑物时拉出一张信息卡片，并在用户点击角落的指南针 img 时删除卡片.该代码应用了两个不同的 CSS 类来让卡片出现和消失。我能够让 addEventListener 在建筑物和指南针上工作，但它只能工作一次。换句话说，点击建筑物一次后，卡片出现，然后点击指南针后消失。但是，前两个之后的任何进一步点击似乎都没有注册。至少，卡片不会再出现和消失了。
这看起来很简单，但我无法弄清楚为什么这些按钮只能工作一次。
我一直在用 SublimeText 写作并在我的浏览器中查看该网站。如果您对为什么会发生这种情况有任何想法，请告诉我？！
//stores marker as variable
var wsc = document.getElementById("wsc");
//stores event function
var onBuildingClick = function()
document.getElementById("_wsc").classList.add("card");
//adds event listener to marker
wsc.addEventListener("click", onBuildingClick);
//////////////////////////////////
//stores compass as a variable
var compass = document.getElementById("compass_img");
//stores event function
var onCompassClick = function()
document.getElementById("_wsc").classList.add("_card");
//adds event listener to compass
compass.addEventListener("click", onCompassClick);.card
position: absolute;
background-color: white;
width: 60%;
height: 60%;
left: 20%;
top: 20%;
._card
display: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="byu_richmap.css">
<title>byu_richmap</title>
</head>
<body>
<div class="campus_map">
<img id="campus_img" src="BYUmap_simple.png">
<div id="wsc" class="identifier"></div>
<div id="hbll" class="identifier"></div>
<div id="hfac" class="identifier"></div>
<div id="moa" class="identifier"></div>
<div id="asb" class="identifier"></div>
<div id="jkb" class="identifier"></div>
<div id="tmcb" class="identifier"></div>
<div id="jfsb" class="identifier"></div>
<div id="swkt" class="identifier"></div>
<div id="esc" class="identifier"></div>
<div id="kc" class="identifier"></div>
<div id="marb" class="identifier"></div>
<div id="cb" class="identifier"></div>
<div id="ctb" class="identifier"></div>
<div id="lsb" class="identifier"></div>
<div id="brwb" class="identifier"></div>
<div id="snlb" class="identifier"></div>
<div id="rotc" class="identifier"></div>
<div id="jrcb" class="identifier"></div>
<div id="mlbm" class="identifier"></div>
<div id="mc" class="identifier"></div>
<div id="hc" class="identifier"></div>
<div id="tnrb" class="identifier"></div>
<div id="bnsb" class="identifier"></div>
<div id="hgb" class="identifier"></div>
<div id="msrb" class="identifier"></div>
<div id="brmb" class="identifier"></div>
<div id="mckb" class="identifier"></div>
<div id="rb" class="identifier"></div>
<div id="lves" class="identifier"></div>
<div id="canc" class="identifier"></div>
<div id="sab" class="identifier"></div>
<div id="sfh" class="identifier"></div>
<div id="_wsc" class="cards"></div>
<!--<div id="_hbll" class="card"></div>
<div id="_hfac" class="card"></div>
<div id="_moa" class="card"></div>
<div id="_asb" class="card"></div>
<div id="_jkb" class="card"></div>
<div id="_tmcb" class="card"></div>
<div id="_jfsb" class="card"></div>
<div id="_swkt" class="card"></div>
<div id="_esc" class="card"></div>
<div id="_kc" class="card"></div>
<div id="_marb" class="card"></div>
<div id="_cb" class="card"></div>
<div id="_ctb" class="card"></div>
<div id="_lsb" class="card"></div>
<div id="_brwb" class="card"></div>
<div id="_snlb" class="card"></div>
<div id="_rotc" class="card"></div>
<div id="_jrcb" class="card"></div>
<div id="_mlbm" class="card"></div>
<div id="_mc" class="card"></div>
<div id="_hc" class="card"></div>
<div id="_tnrb" class="card"></div>
<div id="_bnsb" class="card"></div>
<div id="_hgb" class="card"></div>
<div id="_msrb" class="card"></div>
<div id="_brmb" class="card"></div>
<div id="_mckb" class="card"></div>
<div id="_rb" class="card"></div>
<div id="_lves" class="card"></div>
<div id="_canc" class="card"></div>
<div id="_sab" class="card"></div>
<div id="_sfh" class="card"></div>-->
</div>
<div class="compass">
<img id="compass_img" src="byu_richmap_compass.png">
</div>
<script src="byu_richmap.js"></script>
</body>
</html>【问题讨论】：
检查控制台是否有错误。我没有看到任何带有id '_wsc' 的元素
打开您的开发者控制台（在大多数浏览器上为ctrl + shift + i），您是否遇到任何错误？
控制台中没有显示错误。我添加了 console.log("eventhard!");到回调函数，它就可以很好地注销到控制台。因此，事件侦听器正在工作，但 CSS 出了点问题。清除 _card 样式是什么意思？
【参考方案1】：
您没有清除 _card 样式，这使它不可见。您的代码运行良好
var onBuildingClick = function()
document.getElementById("_wsc").classList.add("card");
document.getElementById("_wsc").classList.remove("_card");
这里也是。
var onCompassClick = function()
document.getElementById("_wsc").classList.add("_card");
document.getElementById("_wsc").classList.remove("card");
Fiddle
【讨论】：
【参考方案2】：记住一个元素可以有多个类。
你点击建筑物，.addClass('card')被调用，现在#_wsc拥有card这个类。
你点击罗盘，.addClass('_card') 被调用，所以#_wsc 有card _card 类。
你再次点击建筑物，调用.addClass('card')，但它已经有类card，所以什么也没有发生。
听起来您希望.addClass('_card') 将card 类替换为_card，但事实并非如此。
这个怎么样：
.card
display: none;
.visible
display: block;
var onBuildingClick = function ()
document.getElementById("_wsc").classList.add("visible");
var onCompassClick = function ()
document.getElementById("_wsc").classList.remove("visible");
【讨论】：
嗨，本，非常感谢您的帮助！我得到了它。我就是不能让它保留上一个事件中添加的课程！【参考方案3】：onCompassClick 的第一次执行添加了display:none，它不会在连续点击时被删除。删除类 _card 以显示
再次显示信息卡。
var onBuildingClick = function()
document.getElementById("_wsc").classList.remove("_card");
document.getElementById("_wsc").classList.add("card");
【讨论】：
以上是关于Javascript addEventListener 只运行一次的主要内容，如果未能解决你的问题，请参考以下文章
Javascript 的addEventListener()及attachEvent()区别分析
在Class里面的Javascript ES6 addEventListener
多个 addEventListener 如何在 JavaScript 中工作？
无法读取 null 的属性“addEventListener”（JavaScript Sails 应用程序）