[英]Can't seem to get the addEventListener to work
I'm currently stuck, as I can't seem to get the addEventListener to work.我目前卡住了,因为我似乎无法让 addEventListener 工作。
I've tried the Dev.我试过开发。 Tools with break points on addEventListener but they don't stop the script, so I guess there is something wrong with the code detecting the
click
and mouseleave
and mouseenter
上的addEventListener破发点的工具,但他们不停止脚本,所以我想有一些错误的代码检测的
click
和mouseleave
和mouseenter
function hide() { document.getElementById("links").style.display = "none"; }; function show() { document.getElementById("links").style.display = "flex"; }; var menu = document.getElementById("menu"); menu.addEventListener("mouseenter", show); menu.addEventListener("mouseleave", hide); menu.addEventListener("click", show); document.addEventListener("click", function() { if (this != menu) { document.getElementById("links").style.display = "none"; } });
#menu { height: 10vh; background-color: red; text-align: center; transition: all 1s ease-out; padding-top: 5vh; } #menu:hover { color: red; } #envelope { height: 0; display: block; background-color: blue; min-width: 100%; z-index: 1; position: absolute; left: 0; content: ""; opacity: 0; transition: all 1.3s ease-out; } #links { height: 0; display: none; background-color: pink; justify-content: center; z-index: 2; min-width: 100%; opacity: 0; transition: all 1s ease-in; } #google { margin-top: -1vh; width: 150px; } #mysite { padding-left: 5%; margin-top: -1vh; width: 150px; } #menu:hover #links { opacity: 1; height: 100px; } #menu:focus #links { opacity: 1; height: 100px; } #menu:hover #envelope { height: 100px; opacity: 1; } #menu:focus #envelope { height: 100px; opacity: 1; }
<div id="menu">Click here to browse the internet. <div id="envelope"> <div id="links"> <div> <a href="https://www.google.com"><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a> </div> <div style="width: 20%;"></div> <div> <a href="https://www.mywebsite.com/si/"><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png" /></a> </div> </div> </div> </div>
In your snippet, addEventListener
is working, but it looks like the code is not producing the behavior you want or expect.在您的代码段中,
addEventListener
正在工作,但看起来代码没有产生您想要或期望的行为。 You don't seem to be accounting for the way events propagate through the DOM.您似乎没有考虑事件通过 DOM 传播的方式。
You can read about that here: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation你可以在这里阅读: https : //developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
You probably want something like the following:您可能想要以下内容:
document.addEventListener("click", function (event) {
event.stopPropagation();
console.log("clicked", event.target, this);
if (event.target != menu) {
/* something else was clicked */
} else {
/* the menu was clicked */
}
});
Note that the click handler is naming an argument, called "event."请注意,单击处理程序正在命名一个名为“事件”的参数。 Then we use
event.stopPropagation()
and look at event.target
rather than this
.然后我们使用
event.stopPropagation()
并查看event.target
而不是this
。
I've also added a console.log
statement so you can see the difference between the this
keyword and the value of event.target
.我还添加了一个
console.log
语句,以便您可以看到this
关键字和event.target
的值之间的区别。
You are almost there, a few modifications needed are,你快到了,需要做一些修改,
In css , you are making opacity: 0
for two elements #envelope
and also #links
which you could change the envelope to opacity: 1
itself.在css 中,您正在为两个元素
#envelope
opacity: 0
#envelope
和#links
,您可以将信封更改为opacity: 1
本身。
In JS , this line executes successfully,在JS 中,这一行执行成功,
document.getElementById("links").style.display = "flex";
But as already the css for #links
is opacity: 0
, it is not displaying so you need to make opacity: 1
as well along with display:flex
via JS..但是因为
#links
的 css 已经是opacity: 0
,它没有显示,所以你需要通过 JS 制作opacity: 1
和display:flex
..
So the code inside show()
function, should be,所以
show()
函数中的代码应该是,
function show (){
document.getElementById("links").style.display = "flex";
document.getElementById("links").style.opacity = "1";
};
And the snippet as follows,片段如下,
function hide (){ document.getElementById("links").style.display = "none"; }; function show (){ document.getElementById("links").style.display = "flex"; document.getElementById("links").style.opacity = "1"; }; var menu = document.getElementById("menu"); menu.addEventListener("mouseenter", show); menu.addEventListener("mouseleave", hide); menu.addEventListener("click", show); document.addEventListener("click", function (){ console.log(this != menu); if (this != menu){ document.getElementById("links").style.display="none"; } });
#menu{ height: 10vh; background-color: red; text-align: center; transition: all 1s ease-out; padding-top: 5vh; } #menu:hover{ color: red; } #envelope{ height: 0; display: block; background-color: blue; min-width: 100%; z-index: 1; position: absolute; left: 0; content: ""; opacity: 1; transition: all 1.3s ease-out; } #links{ height: 0; display: none; background-color: pink; justify-content: center; z-index: 2; min-width: 100%; opacity: 0; transition: all 1s ease-in; } #google{ margin-top: -1vh; width: 150px; } #mysite{ padding-left: 5%; margin-top: -1vh; width: 150px; }
<div id="menu">Click here to browse the internet. <div id="envelope"> <div id="links" > <div><a href="https://www.google.com"><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a></div> <div style="width: 20%;"></div> <div><a href="https://www.mywebsite.com/si/"><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></a></div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.