两次尝试后触发Javascript

Posted 2023-03-27

【中文标题】两次尝试后触发Javascript

【英文标题】：Javascript firing after two attempts

【发布时间】：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”未定义）。

【参考方案1】：

那你为什么要这样做：

document.onclick = function(event) 

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

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