小编jt6*_*691的帖子

我有一个包含图标的按钮。我相信该图标干扰了我的点击事件。我只能单击图标边缘来激活 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>

萨斯：

    .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: …