两次尝试后触发Javascript答案

【问题标题】：Javascript firing after two attempts两次尝试后触发Javascript
【发布时间】：2022-01-08 02:41:07
【问题描述】：

好吧，也许标题措辞有点错误......

我有一些 javascript 应该在单击按钮后打开我的侧边栏 - 但需要两次单击才能打开侧边栏，再单击两次才能关闭..

我通过我的 Javascript 了解为什么会发生这种情况 - 但不确定补救措施（不确定它是否真的是 Blazor 问题？）

Javascript

function LoadContent() {

    document.addEventListener("DOMContentLoaded",
        document.onclick = function(event) {

            const showNavbar = (toggleId, navId, pId, headerId) => {
                const toggle = document.getElementById(toggleId),
                    nav = document.getElementById(navId),
                    bodypd = document.getElementById(pId),
                    headerpd = document.getElementById(headerId);
                    mainbodypd = document.getElementById("mainbody");
                

                if (toggle && nav && bodypd && headerpd && mainbodypd) {
                    toggle.addEventListener("click",
                        () => {
                            nav.classList.toggle("show");
                            toggle.classList.toggle("bx-x");
                            bodypd.classList.toggle("body-pd");
                            headerpd.classList.toggle("body-pd");
                            mainbodypd.classList.toggle("height-100short");

                        });
                }
            };

            showNavbar("header-toggle", "nav-bar", "body-pd", "header");

            const linkColor = document.querySelectorAll(".nav_link");

            function colorLink() {
                if (linkColor) {
                    linkColor.forEach(l => l.classList.remove("active"));
                    this.classList.add("active");
                }
            }

            linkColor.forEach(l => l.addEventListener("click", colorLink));

        });
   
}

谁能解释一下，我该如何防止这种情况发生（对不起，我对 JS 还很陌生）

【问题讨论】：

您在点击处理程序内部分配了点击处理程序。因此，只需单击一下即可分配它们。也许你根本不需要外部的“document.onclick”处理程序。
小错字 mainbodypd 未定义
blazor 的全部想法不就是你不使用 javascript 吗？ "Blazor 允许您使用 C#而不是 JavaScript 构建交互式 Web UI。"
正如其他人所说：删除 document.onclick = function(event) { 这样它就不会在每次单击文档时都在加载时运行
如果我拿走那部分 - 我只是不断收到异常 - 找不到“LoadContent”（“LoadContent”未定义）。

标签： javascript jquery blazor

【解决方案1】：

那你为什么要这样做：

document.onclick = function(event) {

这使得函数触发每个页面点击页面上的任何地方（意味着您每次点击时都会继续添加事件侦听器）。

您可能应该删除该部分，或者如果您需要它来做某事，请将显示的avbar 部分从中取出，然后将其放在 DOMContentLoaded 中

【讨论】：