堆棧內存溢出
  簡體   English   中英

JS Click事件偵聽器未按預期觸發功能

[英]JS click event listener doesn't trigger function as expected

 原文  2018-06-07 13:59:17  5   1    javascript/ html/ css/ dom/ dom-events

問題描述

我試圖將click事件偵聽器添加到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;}


}

1 個解決方案

解決方案1
 1  2018-06-07 14:18:49

邊框不適用於display屬性。 正如David提到的，border-box用於調整大小。 您的JS工作正常，我會為您提供一個摘要： 

 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和那個功能。 我還添加了一個控制台日志，以顯示單擊按鈕時它正在觸發。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 具有相似行為的第二個元素上的JS click事件不會觸發 JS #urls不會在第一次單擊時觸發該功能 我的 function（使用事件監聽器）似乎沒有給出預期的 output。 我該如何解決？ JS 點擊事件監聽器只工作一次，而不是預期的 if 語句 單擊標簽不會觸發單擊事件 點擊事件未觸發預期效果 就我而言，點擊事件不會觸發 首次點擊不會觸發事件 Javascript點擊監聽器，但是不會在子元素上觸發嗎？ 事件偵聽器不會在 JavaScript 上觸發動態創建的元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM