Значок мешает событию нажатия кнопки

У меня есть кнопка с иконкой. Я считаю, что значок мешает моему событию щелчка. Я могу щелкнуть только поля значка, чтобы активировать событие onclick, но ничего не происходит, когда я нажимаю на значок. Я заменил значок текстом, и кнопка onclick работает отлично. Я пробовал z-index поместить значок за кнопку, но безрезультатно. Может кто-нибудь объяснить, почему значок блокирует щелчок и как я могу это исправить?

HTML:

<div class="navMenu">
     <button onclick="navClick()" class="navMenu-button"><i class="fas fa-bars"></i></button>
     <div id="navList" class="navMenu-content">
           <a href="index.htm" class="navMenu-link">Home</a>
           <a href="about.htm" class="navMenu-link">About</a>
           <a href="resume.htm" class="navMenu-link">Resume</a>
     </div>

sass:

    .navMenu{
    position: relative;
    display: inline-block;
    margin-top:5px;
    margin-left:5px;
    &-button {
      background-color: #615b5b;
      border-radius:50%;
      color: white;
      padding: 7px;
      opacity:0.7;
      border:none;
      font-size: 14px;
      cursor: pointer;
    }
    &-button:hover, &-button:focus {
      background-color: #615b5b;
    }
    &-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 200px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    &-content .navMenu-link{
      color: $body-text-color;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    &-content .navMenu-link:hover {
        background-color: #ddd;
    }
    &-show {
        display:block;
    }
}

js:

function navClick() {
document.getElementById("navList").classList.toggle("navMenu-show");
}
window.onclick = function(event) {
if (!event.target.matches('.navMenu-button')) {
     var dropdowns = document.getElementsByClassName("navMenu-content");
     var i;
     for (i = 0; i < dropdowns.length; i++) {
       var show = dropdowns[i];
       if (show.classList.contains('navMenu-show')) {
          show.classList.remove('navMenu-show'); 
        }
     }
   }
}

javascript html css sass
person jt691    schedule 14.12.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это происходит потому, что вы устанавливаете событие, которое проверяет, содержит ли щелкнутый элемент конкретный класс, и действительно, когда он щелкает значок, он не будет совпадать, потому что значок не содержит класс, который вы можете решить, спрашивая, есть ли также родительский содержит класс....

window.onclick = function(event) {

   if (event.target.matches('.navMenu-button') || 
      event.target.parentNode.matches('.navMenu-button')
   ) {
    console.log("it matches..."); 
   }
}
.icon {
background:red;
}
<button class="navMenu-button">this is the button
  <div class="icon">this is the icon</div>
</button>

С другой стороны, вы можете ссылаться на событие щелчка, используя метод onclick, в этом случае он решит его автоматически.

var button = document.querySelectorAll('.navMenu-button')[0];
button.onclick = function() {
  console.log("button clicked");
}
person Renzo Calla    schedule 14.12.2018