js onclick方法在火狐中不起作用

Question

定义了一个 onclick，在 Edge 和 chrome 中都起作用，但是火狐就 gg 了，刚自学网页前端，还望各位指教一下，多谢！

<div class="sidebar-btn">
    <button>
        <span class="sidebar-btn-icon" onclick="sidebarOpen();">
            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path>
                <path d="M0 0h24v24H0z" fill="none"></path>
            </svg>
        </span>
    </button>
</div>

function sidebarOpen() {
    if (main.hasClass('sidebar-open')) {
        main.removeClass('sidebar-open');
    } else {
        main.addClass('sidebar-open');
    }
}
// main 是我定义的变量名，具体在下面的截图里面，我尝试过不用变量了

让我纳闷的是另外一个函数在火狐里就起作用，就上面这个不行，下面是起作用的那个：

<div class="header-search-btn">
    <i class="fas fa-search search-open" onclick="searchToggle();"></i>
    <i class="fas fa-times search-close" onclick="searchToggle();"></i>
</div>

function searchToggle() {
    if(main.hasClass('search-open')) {
        main.removeClass('search-open');
        $(".search-input").val("");
        $("#local-search-result").empty();
    } else {
        main.addClass('search-open');
        $(".search-input").val("");
        $("#local-search-result").empty();
        scrollTo(0,0);
    }
}

原来方法名字为 sidebarToggle()，我还以为是方法名原因，然后改过来了，我也试过直接把 js 放到元素后面，还是不起作用，因为自己都是独自琢磨过来的，所以写的不是那么的规范。希望各位前辈能指点我一下。

Answer 1

火狐下， button 内的子元素的 click 事件会被拦截掉，
所以你 button 里的 span 点击无效，但 div 里的 i 点击有效。
如果你需要 span 拥有点击效果，则把 button 改为 div 即可，可以将 button 样式加在 div 上。