JS单击事件侦听器未按预期触发功能答案

【问题标题】：JS click event listener doesn't trigger function as expectedJS单击事件侦听器未按预期触发功能
【发布时间】：2018-11-17 11:36:10
【问题描述】：

我正在尝试将单击事件侦听器添加到 div，然后应该更改另一个元素中的 css 样式。我基本上是在尝试制作模型窗口。单击 div/按钮时，它应该将显示属性从“无”更改为“边框框”。但是，单击 div 似乎没有任何效果。我已经尝试过控制台日志记录，但那里也没有任何显示。当我移动 div（正在单击）并将其放在 HTML 文档的不同部分时，它似乎工作正常。超级困惑。

这里是 HTML：

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Scott Munro - Portfolio</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Outline|Titillium+Web" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header>                        
    <!-- nav bar --> 
      <nav class="navbar">
        <a id="home-link" href="#top"></a>  
        <ul class="icon-list">
          <li class="github-icon icon"><a href="https://github.com/catsinspacesuits"><i class="fab fa-github"></i></a></li>
          <li class="linkedin-icon icon"><a href="#"><i class="fab fa-linkedin"></i></a></li>
          <li class="codepen-icon icon"><a href="#"><i class="fab fa-codepen"></i></a></li>
        </ul>
        <ul class="header-list">
          <li class="nav-link"><a href="#about-section">About</a></li>
          <li class="nav-link"><a href="#projects-section">Projects</a></li>
          <li class="nav-link"><a href="#contact-section">Contact</a></li>
        </ul>
      </nav>  <!-- end of navbar -->

        <div class="header-title">
          <h1>Scott Munro</h1>
          <h2>Web Developer</h2>
          <div class="section-divider"></div>
        </div>

        <div class="scrolling">
            <div id="top"></div> <!-- allows smooth scroll to top of page -->
            <img src="layer-front3.png" class="layer" id="layer-one"></img>
            <img src="layer1b.png" class="layer" id="layer-oneb"></img>
            <img src="layer2.png" class="layer" id="layer-two"></img>
            <img src="layer3.png" class="layer" id="layer-three"></img>
            <img src="layer4.png" class="layer" id="layer-four"></img>
        </div>

        <div id="sun"></div>
        <div id="sky"></div>
    </header>

        <!-- Sections: -->

        <!-- INTRO -->

        <section class="section-background intro-color">
            <div class="intro-container container">
                <p>Hi, I'm Scott! I'm a developer based in Berlin who is available for hire. I'm passionate about building apps with clean, tested and maintainable code. I have an aptitude for problem solving and a hunger for continuous improvement. I am looking to work as part of a team where I can contribute to a meaningful project whilst continuing to learn from my peers.</p>
            </div>

        </section>

        <!-- ABOUT -->

        <section class="section-background about-color">

            <div class="about-container container">
                <h2 id="about-section">About Me</h2>
                <div class="section-divider"></div>
            <img id="head" src="img/8bit_head.jpg" alt="head" class="responsive">

            <p></p>

            <div class="about-skills" class="about-box">
              <h3>My Skills</h3>  
              <ul id="skill-list">
                <li>HTML5</li>  
                <li>CSS3</li>
                <li>SASS</li>
                <li>Bootstrap</li>
                <li>JavaScript</li>
                <li>jQuery</li>
                <li>Ruby</li>
                <li>Rails</li> 
                <li>Responsive Web Design</li>
                <li>Version Control (Git)</li>
              </ul>
            </div>
            <a id="resume-button" href="cv.pdf" download>Download Resume
                <div id="file-icon"></div>
            </a>
          </div> <!-- end of about container -->
        </section>

        <!-- PROJECTS -->

        <section class="section-background projects-color">
            <div class="projects-container container">
                <h2 id="projects-section">Projects</h2>
                <div class="section-divider"></div>
              <div class="project">
                <h3>E-commerce Site</h3>
                <div class="project-image project-one"></div>
                <p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse consequat deterruisset ex.</p>
            <div class="project-icons">
                <a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
                <div class="project-btn" id="modal-btn">More details</div>
                <div class="project-btn">Visit site</div>
            </div>
              </div>
              <div class="project">
                <h3>Portfolio Site</h3>
                <div class="project-image project-two"></div>
                <p class="project-description">Mea novum iusto dignissim ne, zril convenire forensibus duo an, ne pri dicant dolores omittantur. Nam ex fugit deseruisse, no stet iuvaret conceptam vix. Sit ut tempor epicurei expetendis, ne mel odio suscipit disputando, ut choro munere sit.</p>
            <div class="project-icons">
                <a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
                <div class="project-btn">More details</div>
                <div class="project-btn">Visit site</div>
            </div>
              </div>
              <div class="project">
                <h3>Calculator</h3>
                <div class="project-image project-three"></div>
                <p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
            <div class="project-icons">
                <a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
                <div class="project-btn">More details</div>
                <div class="project-btn">Visit site</div>   
            </div>
            </div>
              <div class="project">
                <h3>Javascript To-do App</h3>
                <div class="project-image project-four"></div>
                <p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
            <div class="project-icons">
                <a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
                <div class="project-btn">More details</div>
                <div class="project-btn">Visit site</div>
            </div>
              </div>
              <div class="modal"></div> <!-- Modal for projects windows -->
            </div> <!-- end of project container -->

        </section>

        <div class="clearfix"></div> <!-- clear fix below Projects section -->

        <!-- CONTACT -->

        <section class="section-background contact-color">

            <div id="contact-container" class="container">
                <div id="contact-header">
                    <h2 id="contact-section">Get in Touch</h2>
                    <div class="section-divider"></div>
                </div>
                <p>Email me directly at <strong>simunro (at) hotmail (dot) co (dot) uk</strong> or fill out the form below. Be sure to check out my <span href="" class="form-link">Github</span>, <span class="form-link">LinkedIn</span> and <span class="form-link">Codepen</span> accounts too!</p>
                <form action="https://formspree.io/simunro@hotmail.co.uk" method="POST">
                <label>Name: </label>
                <input type="text" name="name" id="name"><br>
                <label>Email: </label>
                <input type="email" name="_replyto"><br>
                <label>Message: </label>
                <textarea placeholder="Please leave your message here..." required></textarea><br>
                <input type="submit" value="Send" id="send-button">
                </form>
            </div> <!-- end of contact container -->
        </section>

    <!-- FOOTER -->

    <footer>
        <ul class="icon-list">
          <li class="github-icon icon"><a href="https://github.com/catsinspacesuits"><i class="fab fa-github"></i></a></li>
          <li class="linkedin-icon icon"><a href="#"><i class="fab fa-linkedin"></i></a></li>
          <li class="linkedin-icon icon"><a href="#"><i class="fab fa-codepen"></i></a></li>
        </ul>
      <div class="copyright"><p>&copyScott Munro 2018</p></div>
      <div class="section-divider"></div>
    </footer>

    <!-- SCRIPTS -->

    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.scrollorama.js"></script>
    <script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>

还有 Javascript：

document.querySelector('#modal-btn').addEventListener('click', 
  function() {
    document.querySelector('.modal').style.display = 'border-box';
  });

还有 CSS：

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Titillium Web, Arial, sans-serif;
    font-size: 1rem;
}

/*NAV BAR*/

.navbar {
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    background-color: #222222;
}

.navbar ul {
    float: right;
    margin-top: 1rem;
}

.header-list {
    margin-right: 2rem;
}

.navbar li {
    display: inline-block;
    padding: 0.8rem;
}

.navbar a {
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.6em;
    text-decoration: none;
    font-size: 0.8em;
}

.navbar a:hover {
    color: #FFD03F;
}

.fab {
    font-size: 1.8rem;
    color: white;
}

.fab:hover {
    color: #FFD03F;
}

#home-link {
    float: left;
    background-image: url(img/house_white.png);
    background-size: 80%;
    background-repeat: no-repeat;
    margin: 25px 0px 0px 30px;
    width: 40px;
    height: 40px;
}

/*PARALLAX JUMBO*/

header {
    width: 100%;
    height: 720px;
}

.scrolling {
    position: relative;
  margin: auto;
  width: 100%;
    height: 600px;
    z-index: 1;
}

.layer {
    width: 100%;
    height: 600px;
    background-size: cover;
    position: fixed;
}

#layer-one {
    position: fixed;
    height: 800px;
    top: -60px;
    left: 0;
    z-index: -1;
}

#layer-oneb {
    position: fixed;
    height: 700px;
    top: 60px;
    left: 0;
    z-index: -2;
}

#layer-two {
    /*background-image: url('layer2.png');*/
    left: 0;
    top: 50px;
    z-index: -4;
}

#layer-three {
    /*background-image: url('layer3.png');*/
    height: 700px;
    top: -15px;
    left: 0;
    z-index: -3;
}

#layer-four {
    /*background-image: url('layer4.png');*/
    top: 65px;
    left: 0;
    z-index: -5;
}

#sun {
    position: relative;
    left: 80%;
    z-index: -5;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: #FFD03F;
    box-shadow: 0px 0px 40px 20px #FFD03F;  
    animation: sunrise 6s ease-out forwards;
}

#sky {
    position: relative;
    top: -2rem;
    z-index: -6;
    width: 100%;
    height: 600px;
    background: linear-gradient(darkblue, #FFD03F);
    animation: sky 6s ease-out forwards;
}

/*TITLE*/

.header-title {
    position: absolute;
    top: 150px;
    left: 400px;
    float: left;
    z-index: 1;
    text-align: center;
    animation: fade 7s forwards;
}

.header-title h1 {
    font-size: 4.7rem;
    color: white;
    letter-spacing: 0.6rem;
    opacity: 0.3;
}

.header-title h2 {
    font-size: 2.5rem;
    color: white;
    opacity: 0.3;
}

.header-title .section-divider {
    width: 40%;
    opacity: 0.3;
    background-color: white;
}

/*SECTIONS*/

.section-background {
    font-size: 1rem;
    margin: 0 auto;
    padding: 6rem 2rem 7rem 2rem;
    z-index: -8;
}

.container {
    width: 60%;
    margin: 0 auto;
    padding: 5rem 0;
    background-color: white;
    opacity: 0.9;
    padding: 3rem;
}

.intro-color {
    background-color: #07337A;
    z-index: 8;
}

.about-color {
    background-color: white;
}

.projects-color {
    background-color: white;
    position: relative;
}

.contact-color {
    background-color: #ddd;
}

#top { /*enables smooth scrolling on home icon link*/
    position: absolute;
    top: -40rem;
}

/*INTRO SECTION*/

.intro-container p {
    font-size: 2rem;
}

/*ABOUT SECTION*/

.about-container {
    background-color: #07337A;
    color: white;
    box-shadow: 2rem 2rem 50rem 2rem grey;
}

.about-container p {
    font-size: 1.3rem;
    padding: 0 1rem 2rem 1rem;
    line-height: 3rem;
}

.about-container h2 {
    font-size: 2.6rem;
    text-align: center;
    padding: 2rem;
}

.about-box {
    border: 1px solid black;
    padding: 1.6rem;
    margin: 3rem 1.5rem 3rem 0;
    display: inline-block;
}

#resume-button {
    border: 2px solid black;
    padding: 1rem 4rem 1rem 1rem;
    box-shadow: 3px 3px 5px black;
    background-color: white;
    text-decoration: none;
    color: black;
    transition: 700ms;
    float: right;
}

#resume-button:hover {
    background-color: #5c5292;
    color: white;
}

#file-icon {
    display: inline-block;
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background: url(img/file.png) no-repeat;
}

.about-skills li {
    display: inline-block;
    list-style-type: none;
    padding: 0.3rem;
    margin: 0.3rem;
    border: 1px solid white;
    border-radius: 5px;
}

.responsive { /*to make image responsive*/
    width: 100%;
    height: auto;
}

#head {
    float: left;
    width: 30%;
    margin-right: 3rem;
}

/*PROJECTS SECTION*/

.projects-container h2 {
    text-align: center;
    padding: 3rem 0 1.6rem 0;
    font-size: 2.6rem;
}

.projects-container {
    width: 80%;
}

.project {
    position: relative;
    float: left;
    width: 40%;
    height: 400px;
    border: 1px solid black;
    padding: 2%;
    margin: 4.5%;
    text-align: left;
    font-size: 0.9rem;
    box-shadow: 0 0 5rem #b7b7b7;
}

.project-image {
    width: 37%;
    height: 45%;
    float: left;
    background-size: cover;
    background-position: center center;
    border: 1px solid black;
    margin: 1rem 1rem 0 0;
}

.project p {
    padding: 1rem 0;
}

.project-icons {
    width: 100%;
    position: absolute;
    bottom: 1%;
    left: 0;
    font-size: 1rem;
    padding: 8px;
}

.project-btn {
    float: left;
    border: 1px solid black;
    padding: 7px 20px;
    margin: 0 5px;
    border-radius: 4px;
    box-shadow: 3px 3px 10px grey;
}

.project-icons .fab {
    color: black;
    border: none;
    font-size: 2.6rem;
    padding: 0;
    margin-right: 10px;
}

.project-three {
    background-image: url(img/calculator.jpg);
}

.project-four {
    background-image: url(img/todo.png);
}

.clearfix {
    clear: both;
}

/*PROJECTS MODAL*/

.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
}

/*CONTACT SECTION*/

#contact-container {
    padding: 0;
    width: 50%;
    clear: both;
}

#contact-container h2 {
    text-align: center;
    font-size: 2.4rem;
    margin: 1.2rem;
    padding: 2rem 4rem 0 4rem;
}

#contact-header {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 3% 0;
    background-color: #07337A;
    color: white;
}

.section-divider {
    width: 24%;
    height: 4px;
    margin: 0 auto 3rem auto;
    background-color: lightblue;
}

#contact-container {
    box-shadow: 0 0 100px #555555;
}

#contact-container p {
    padding: 2.6rem;
    text-align: center;;
    font-size: 1.7rem;
}

.form-link {
    color: #1158C8;
}

form {
    margin: 0 auto;
    width: 100%;
    background-color: white;
    text-align: center;
}

form label {
    display: block;
    padding: 0.7rem 0;
}

form textarea {
    height: 14rem;
}

input, textarea {
    display: inline-block;
    width: 80%;
    border: 1px solid black;
    padding: 0.5rem;
    margin: 0 auto;
}

#send-button {
    margin: 3rem auto;
    border: 1px solid #222222;
    padding: 0.5rem;
    box-shadow: 5px 5px 20px #333333;
    background-color: #09429D;
    color: white;
    font-size: 1rem;
    letter-spacing: 0.3rem;
    transition: 400ms;
}

#send-button:hover {
    background-color: #07337A;
    cursor: pointer;
}

/*FOOTER*/

footer {
    position: absolute;
    height: auto;
    width: 100%;
    background-color: #222222;
}

footer li {
    list-style: none;
    display: inline-block;
    padding: 1rem;
}

.icon-list {
    width: 12rem;
    height: 4rem;
    margin: 0 auto;
}

.copyright p {
    width: 100%;
    margin:  0 auto;
    text-align: center;
    letter-spacing: 0.4em;
    font-size: 1rem;
    padding-bottom: 1rem;
    color: white;
    background-color: #222222;
}

footer .section-divider {
    background-color: white;
    margin-bottom: 1.5rem;
    border: 0.5px solid white;
    height: 1px;
    width: 11rem;
}

/*KEYFRAMES*/

@keyframes sky {
    from {top: 10px;}
    to {top: -170px;}
}

@keyframes sunrise {
    from {top: 450px;}
    to {top: 210px;}
}

@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

/*MEDIA QUERIES*/

/*Small:*/

@media only screen and (max-width: 600px) {
        html {font-size: 10px;}
        .container {width: 100%;
                                padding: 8px;
                                margin: 0;

        }
    #contact-container {width: 100%;}

    .projects-container {width: 100%;}
    .layer {width: 100vw;
  height: 100vh;
  object-fit: cover;}
  .section-background {padding: 0;}
    .header-title h1 {font-size: 24px;}
    .header-title {left: 70px;
                                    top: 160px;
    }
  }
  #home-link {display: none;}


}

【问题讨论】：

监听器工作，但border-box 不是display 的合适值。预期的结果是什么？
box-sizing:border-box
so with JS - document.querySelector('.modal').style.boxSizing = 'border-box';
啊，当然。应该是display: block;。现在改了，但还是不行。我希望在单击 id 为 modal-btn 的 div 后，它会更改类为 modal 的 div 的显示属性，然后它就会可见。
它改变了显示属性，但是div是空的，你看不到一个空的div ...

标签： javascript html css dom dom-events

【解决方案1】：

边框框不适用于显示属性。正如大卫所说，border-box 用于调整盒子大小。你的 JS 工作正常，我会为你把它扔进一个 sn-p：

document.querySelector('#modal-btn').addEventListener('click',
  function() {
    console.log('working');
    document.querySelector('.modal').style.display = 'block';
  });

.modal {
  display: none;
}

#modal-btn {
  cursor: pointer;
}

<section class="section-background projects-color">
  <div class="projects-container container">
    <h2 id="projects-section">Projects</h2>
    <div class="section-divider"></div>

    <div class="project">
      <h3>E-commerce Site</h3>
      <div class="project-image project-one"></div>
      <p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse
        consequat deterruisset ex.</p>
      <div class="project-icons">
        <a href="https://github.com/catspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
        <div class="project-btn" id="modal-btn">More details</div>
        <div class="project-btn">Visit site</div>
      </div>
    </div>
    <div class="modal"></div>
    <!-- Modal window -->
  </div>
  <!-- end of project container -->
</section>

我将 display:border-box 更改为 display:block 和那个功能。我还添加了一个控制台日志，以显示当您单击按钮时它正在触发。

【讨论】：

我改了JS还是不行。我也尝试过更改其他 CSS 属性，但它没有工作或 consol 记录。我已经编辑了 Q 以便您可以看到整个 HTML 文档。正如我所说，当我将 ID 为 modal-btn 的 div 移动到文档的另一部分时，它会起作用。
这是一个 codepen 的链接：codepen.io/stickdeodorant/pen/PaGVqJ 这是您更新后的代码，当您单击正确的按钮时，您会看到 70% 黑色覆盖。没有其他任何东西，因为这就是 div 当前设置要做的所有事情。
真的很奇怪，它在本地或被推到 bitballoon 时不起作用：elegant-chandrasekhar-226a70.bitballoon.com 它一定与 CSS 有关，但我不能把手指放在它上面......我'将编辑 Q 以包含完整的 CSS 文档。
好的，所以在你的 bitballoon 上查看你的代码，我发现了问题，它是 z-index。您的身体标签正在使用 position: relative;您的某些部分使用负 z-index。所以发生的事情是你的身体标签本质上是页面上的顶部元素。您的代码和按钮可以工作，但由于它们位于正文下方，您无法单击它们。 TL;DL 添加正文 { z-index: -99; }
太棒了！已经解决了 :) 非常感谢！