Икона, която пречи на щракване върху бутон

Имам бутон, заобикалящ икона. Смятам, че иконата пречи на моето събитие за кликване. Мога само да щракна върху полетата на иконата, за да активирам събитието 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="/bgindex.htm" class="navMenu-link">Home</a>
           <a href="/bgabout.htm" class="navMenu-link">About</a>
           <a href="/bgresume.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