javascript - 按钮元素中的嵌套元素不可点击

Question

我遇到了这个问题，我创建了一个按钮，在里面我有一个 for Icon，在元素里面我有 span 来设置 Icon 旁边的文本样式（来自的 Icon 是来自真棒字体的 humberger）

问题是：在javascript中，我使用ID btnm为按钮元素创建了一个onclick函数，但是当我点击文本或按钮中的图标时，虽然当我点击文本和按钮中的图标时onclick 工作正常。我不明白为什么图标和文本在按钮中。请帮忙

document.addEventListener('DOMContentLoaded', function(){

    var menubtn = document.getElementById('btnm');
    var mobilemenu = document.getElementById('navigation-mobile');

    // When the user clicks on the button, open the modal
    menubtn.onclick = function() {
        if (mobilemenu.style.display == 'block') {
            mobilemenu.style.display = "none";
        }
        else {
            mobilemenu.style.display = 'block';
        }
        
    }
}

.mobile-menu-btn {
        float: right;
        display: block;
        padding: 3px 3px 0px 0px;
}

        
.humberger {
    background-color: $identity-color;
    font-size: 20px;
    border: $identity-color;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;  
}

.menu-pargraph {
    font-size: 14px;
    vertical-align: middle;
    padding-left: 5px;
    margin: 0;
    width: 100%;
}
    
  

<div class ="mobile-menu-btn">
  <button class="humberger" id="btnm">
    <i class="menu-btn fas fa-bars">
      <span class="menu-pargraph">Menu</span>
    </i>
  </button>
</div>

<div id="navigation-mobile">
  <ul>
    <li>home</li>
    <li>video</li>
    <li>contact</li>
  </ul>
</div>

标签： javascripthtmlcss

Answer 1

您在 JS 代码中遗漏了一个“)”。

document.addEventListener('DOMContentLoaded', function(){

    var menubtn = document.getElementById('btnm');
    var mobilemenu = document.getElementById('navigation-mobile');

    // When the user clicks on the button, open the modal
    console.log("ok")
}
) // Here you have to add parenthesis