按钮元素中的嵌套元素不可点击答案

【问题标题】：Nested element in button element are not clickable按钮元素中的嵌套元素不可点击
【发布时间】：2021-06-29 20:50:34
【问题描述】：

我遇到了这个问题，我创建了一个按钮，在里面我有一个 for Icon，在元素里面我有 span 来设置 Icon 旁边的文本样式（Icon from is humberger from awesome font）

问题是：在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>

【问题讨论】：

您可以编辑您的帖子，指定哪些有效，哪些无效？现在很困惑，谢谢。

标签： javascript html css

【解决方案1】：

下面的 cmets 中的解释。您在 div 上有 id（和点击侦听器），而不是按钮，并且您的“菜单”文本可能看起来很时髦，因为它位于图标元素内部，继承了图标字体系列。

<div class ="mobile-menu-btn">
  <button class="humberger" id="btnm"> <!-- put the id here -->
    <i class="menu-btn fas fa-bars"></i>
      <span class="menu-pargraph">Menu</span> <!-- move outside of the fontawesome icon -->
  </button>
</div>

您还可以通过使用类的显示/隐藏让您的生活更轻松

css:

#navigation-mobile{
  display:none;
  /* and whatever other styles you have here */
}
.show {
  display:block;
}

然后在你的脚本中：

  menubtn.onclick = function() {
    mobilemenu.classList.toggle('show');
}

【讨论】：

谢谢，我按照您的指示进行操作，效果更好，但我发现问题是由另一个事件引起的。我这样做了，它有帮助，window.onclick = function(event) { if (event.target !== mobilemenu && event.target !== menubtn ) { mobilemenu.style.display = "none";我还尝试在 window.onclick 中使用 classList.toggle，但是当它处于活动状态并且我按下按钮时，菜单会出现，但是当我点击文本“菜单”时它不会出现（通过出现我的意思是显示更改为阻止）
它在我删除跨度并将菜单文本添加到按钮本身而不是跨度后工作。谢谢你的帮助
@HamzeChalhoub 不客气 - 如果您认为这有助于解决您的问题，请单击答案左侧的复选标记将其标记为解决方案。干杯

【解决方案2】：

您在 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

【讨论】：