Question

我目前很困，因为我似乎无法使addEventListener正常工作。

我尝试过开发人员。在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>

Answer 1

在您的代码段中，addEventListener在工作，但是看起来代码没有产生您想要或期望的行为。您似乎并没有考虑事件通过DOM传播的方式。

您可以在这里阅读有关内容： https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

您可能想要以下内容：

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 */
    }
});

请注意，点击处理程序正在命名一个称为“事件”的参数。然后，我们使用event.stopPropagation()而不是event.target来查看this。

我还添加了一个console.log语句，以便您可以看到this关键字和event.target的值之间的区别。

Answer 2

您快到了，需要进行一些修改，

在 css 中，您为两个元素opacity: 0和#envelope制作了#links，可以将信封更改为opacity: 1本身。

在 JS 中，此行成功执行，

document.getElementById("links").style.display = "flex";

但是由于#links的css已经是opacity: 0，所以它没有显示，因此您需要通过JS与opacity: 1一起制作display:flex。 >

因此show()函数中的代码应该是

function show (){
    document.getElementById("links").style.display = "flex";
    document.getElementById("links").style.opacity = "1";
};

代码段如下，

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>

似乎无法使addEventListener正常工作

2 个答案: