为什么一个功能起作用而另一个功能不起作用？ （JavaScript）的

Question

我正在一个项目上进行练习，并且尝试使用模块模式，因为我想尽可能避免使用全局变量。

我的自动滑动和下拉菜单运行正常。 但是，当我单击“主题”时，将显示子菜单，同时，我的图像也在滑动。

为什么剂量子菜单突然消失？

 var slideShow = (function () { var slideImages = document.getElementsByClassName("slide"); var leftSide = document.getElementById("arrow-left"); var rightSide = document.getElementById("arrow-right"); var slideBullets = document.getElementsByClassName("bullets"); var current = 0; function reset() { for (let i = 0; i < slideImages.length; i++) { slideImages[i].style.display = 'none'; slideBullets[i].classList.remove("clicked"); } }; function showImages() { for (let i = 0; i < slideImages.length; i++) { slideImages[0].style.display = 'block'; slideBullets[current].classList.add("clicked"); } }; function arrowSlide() { leftSide.addEventListener("click", function () { reset(); if (current === 0) { current = slideImages.length; } slideImages[current - 1].style.display = 'block'; current--; slideBullets[current].classList.add("clicked"); }); rightSide.addEventListener("click", function () { reset(); if (current === slideImages.length - 1) { current = - 1; } slideImages[current + 1].style.display = 'block'; current++; slideBullets[current].classList.add("clicked"); }); }; function showBulletsImages() { for (let i = 0; i < slideBullets.length; i++) { slideBullets[i].addEventListener("click", function () { reset(); slideImages[i].style.display = 'block'; slideBullets[i].classList.add("clicked"); current = i; }); } }; function autoSlide() { setInterval(function () { rightSide.click(); slideBullets[current].classList.add('clicked') }, 2000); }; return { reset: reset(), showImages: showImages(), arrowSlide: arrowSlide(), showBulletsImages: showBulletsImages(), autoSlide: autoSlide() }; })(); var toggleMenu = (function () { var mainTopics = document.getElementById("maintopics"); mainTopics.addEventListener("click", function (e) { e.preventDefault(); e.stopImmediatePropagation(); mainTopics.classList.toggle("show"); }); document.addEventListener("click", function () { mainTopics.classList.remove("show"); }); return { toggleMenu: toggleMenu() }; })(); 

 body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } /*main-menu*/ #mainmenu { position: relative; } #mainmenu ul { margin: 0; padding: 0; } #mainmenu li { display: inline-block; } #mainmenu a { display: block; width: 100px; padding: 10px; border: 1px solid; text-align: center; } /*sub-topics*/ #subtopics { position: absolute; display: none; margin-top: 10px; width: 100%; left: 0; } #maintopics.show #subtopics { display: block; } #subtopics ul { margin: 0; padding: 0; } #subtopics li { display: block; } #subTopics a { text-align: left; } /*columns*/ #column1, #column2, #column3 { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } /*hover underline*/ #mainmenu li:hover { text-decoration: underline; } /*slideshow*/ #slideshow { position: relative; width: 100%; height: 100%; } #slide1 { background-image: url(https://preview.ibb.co/mV3TR7/1.jpg); } #slide2 { background-image: url(https://preview.ibb.co/bSCBeS/2.jpg); } #slide3 { background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg); } .slide { background-repeat: no-repeat; background-position: center; background-size: 800px 400px; width: 800px; height: 400px; margin: auto; margin-top: 40px; } .slide-contain { position: absolute; left: 50%; bottom: 50%; transform: translate3d(-50%,-50%,0); text-align: center; } .slide-contain span { color: white; } /*arrow*/ .arrow { position: absolute; cursor: pointer; top: 200px; width: 0; height: 0; border-style: solid; } .arrow:hover { background-color: #e0dede; transition: background-color 0.6s ease; } #arrow-left { position: absolute; border-width: 30px 40px 30px 0px; border-color: transparent gray transparent transparent; left: 0; margin-left: 300px; } #arrow-right { border-width: 30px 0px 30px 40px; border-color: transparent transparent transparent gray; right: 0; margin-right: 300px; } /*bullets*/ #slidebullet { position: relative; top: -30px; text-align: center; } .bullets { display: inline-block; background-color: gray; width: 15px; height: 15px; border-radius: 10px; cursor: pointer; transition: background-color 0.6s ease; } .clicked { background-color: #ff0000; } 

 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <header></header> <nav> <div id="mainmenu"> <ul> <li><a href="">Logo</a></li> <li><a href="">Home</a></li> <li id="maintopics"><a href="">Topics</a> <div id="subtopics"> <div id="column1" class="columns"> <ul> <li><a href="">example1</a></li> <li><a href="">example2</a></li> </ul> </div> </div> </li> </ul> </div> </nav> <div id="slideshow"> <div id="slide1" class="slide"> <div class="slide-contain"> <span>Image One</span> </div> </div> <div id="slide2" class="slide"> <div class="slide-contain"> <span>Image Two</span> </div> </div> <div id="slide3" class="slide"> <div class="slide-contain"> <span>Image Three</span> </div> </div> <div id="slidebullet"> <div id="bullet1" class="bullets"></div> <div id="bullet2" class="bullets"></div> <div id="bullet3" class="bullets"></div> </div> <div id="arrow-left" class="arrow"></div> <div id="arrow-right" class="arrow"></div> </div> <script src="jquery.js"></script> <script src="index.js"></script> <script> </script> </body> </html> 

Answer 1

事实是，单击mainTopics时您隐藏了documment 。

当您触发click此处arrow-right时，将click document ： rightSide.click(); 。 （与其他所有内容一样， arrow-right是文档的一部分。）

这会触发document上的click事件，因此会hides mainTopics

一种解决方案是在document click事件中使用event.target ，并使其不成为arrow-right元素（如果需要，也可以不是left-arrow ，很容易修改）

  if (e.target.id != 'arrow-right') {
    mainTopics.classList.remove("show");
  }

附带说明：根据您的条件，您可以使用2种不同的方式编写此if statement

e.target.id != 'arrow-right' && mainTopics.classList.remove("show")

要么

e.target.id != 'arrow-right' ? mainTopics.classList.remove("show") : ""

请参见下面的代码段。 让我知道它是否有效。

 var slideShow = (function () { var slideImages = document.getElementsByClassName("slide"); var leftSide = document.getElementById("arrow-left"); var rightSide = document.getElementById("arrow-right"); var slideBullets = document.getElementsByClassName("bullets"); var current = 0; function reset() { for (let i = 0; i < slideImages.length; i++) { slideImages[i].style.display = 'none'; slideBullets[i].classList.remove("clicked"); } }; function showImages() { for (let i = 0; i < slideImages.length; i++) { slideImages[0].style.display = 'block'; slideBullets[current].classList.add("clicked"); } }; function arrowSlide() { leftSide.addEventListener("click", function () { reset(); if (current === 0) { current = slideImages.length; } slideImages[current - 1].style.display = 'block'; current--; slideBullets[current].classList.add("clicked"); }); rightSide.addEventListener("click", function () { reset(); if (current === slideImages.length - 1) { current = - 1; } slideImages[current + 1].style.display = 'block'; current++; slideBullets[current].classList.add("clicked"); }); }; function showBulletsImages() { for (let i = 0; i < slideBullets.length; i++) { slideBullets[i].addEventListener("click", function () { reset(); slideImages[i].style.display = 'block'; slideBullets[i].classList.add("clicked"); current = i; }); } }; function autoSlide() { setInterval(function () { rightSide.click(); slideBullets[current].classList.add('clicked') }, 2000); }; return { reset: reset(), showImages: showImages(), arrowSlide: arrowSlide(), showBulletsImages: showBulletsImages(), autoSlide: autoSlide() }; })(); var toggleMenu = (function () { var mainTopics = document.getElementById("maintopics"); mainTopics.addEventListener("click", function (e) { e.preventDefault(); e.stopImmediatePropagation(); mainTopics.classList.toggle("show"); }); document.addEventListener("click", function (e) { if (e.target.id != 'arrow-right') { mainTopics.classList.remove("show"); } }); return { toggleMenu: toggleMenu() }; })(); 

 body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } /*main-menu*/ #mainmenu { position: relative; } #mainmenu ul { margin: 0; padding: 0; } #mainmenu li { display: inline-block; } #mainmenu a { display: block; width: 100px; padding: 10px; border: 1px solid; text-align: center; } /*sub-topics*/ #subtopics { position: absolute; display: none; margin-top: 10px; width: 100%; left: 0; } #maintopics.show #subtopics { display: block; } #subtopics ul { margin: 0; padding: 0; } #subtopics li { display: block; } #subTopics a { text-align: left; } /*columns*/ #column1, #column2, #column3 { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } /*hover underline*/ #mainmenu li:hover { text-decoration: underline; } /*slideshow*/ #slideshow { position: relative; width: 100%; height: 100%; } #slide1 { background-image: url(https://preview.ibb.co/mV3TR7/1.jpg); } #slide2 { background-image: url(https://preview.ibb.co/bSCBeS/2.jpg); } #slide3 { background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg); } .slide { background-repeat: no-repeat; background-position: center; background-size: 800px 400px; width: 800px; height: 400px; margin: auto; margin-top: 40px; } .slide-contain { position: absolute; left: 50%; bottom: 50%; transform: translate3d(-50%,-50%,0); text-align: center; } .slide-contain span { color: white; } /*arrow*/ .arrow { position: absolute; cursor: pointer; top: 200px; width: 0; height: 0; border-style: solid; } .arrow:hover { background-color: #e0dede; transition: background-color 0.6s ease; } #arrow-left { position: absolute; border-width: 30px 40px 30px 0px; border-color: transparent gray transparent transparent; left: 0; margin-left: 300px; } #arrow-right { border-width: 30px 0px 30px 40px; border-color: transparent transparent transparent gray; right: 0; margin-right: 300px; } /*bullets*/ #slidebullet { position: relative; top: -30px; text-align: center; } .bullets { display: inline-block; background-color: gray; width: 15px; height: 15px; border-radius: 10px; cursor: pointer; transition: background-color 0.6s ease; } .clicked { background-color: #ff0000; } 

 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <header></header> <nav> <div id="mainmenu"> <ul> <li><a href="">Logo</a></li> <li><a href="">Home</a></li> <li id="maintopics"><a href="">Topics</a> <div id="subtopics"> <div id="column1" class="columns"> <ul> <li><a href="">example1</a></li> <li><a href="">example2</a></li> </ul> </div> </div> </li> </ul> </div> </nav> <div id="slideshow"> <div id="slide1" class="slide"> <div class="slide-contain"> <span>Image One</span> </div> </div> <div id="slide2" class="slide"> <div class="slide-contain"> <span>Image Two</span> </div> </div> <div id="slide3" class="slide"> <div class="slide-contain"> <span>Image Three</span> </div> </div> <div id="slidebullet"> <div id="bullet1" class="bullets"></div> <div id="bullet2" class="bullets"></div> <div id="bullet3" class="bullets"></div> </div> <div id="arrow-left" class="arrow"></div> <div id="arrow-right" class="arrow"></div> </div> <script src="jquery.js"></script> <script src="index.js"></script> <script> </script> </body> </html> 

Answer 2

对于mainTopics您已经在两个DOM元素上附加了click事件。

1. 主要议题
2. 文献

单击时，由于mainTopics DOM click事件而添加了show类

由于event bubbling ， document捕获删除show类的click事件。

因此，同时添加和删除了show类。

mainTopics.addEventListener("click", function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        mainTopics.classList.toggle("show");
    });

    document.addEventListener("click", function () {
        mainTopics.classList.remove("show");
    });