为什么我的 onClick 函数需要点击两次

Question

我从我的几个不同项目中注意到，每当我单击添加了 onClick 函数的内容时，在新加载页面时总是需要单击两次才能使它们运行。我为他们使用的一般结构是：

function PageChange(){

    var welc_p = document.getElementById("welcome");/**gathers page DIVs**/
    var page01 = document.getElementById("page01");
    var page02 = document.getElementById("page02");

    var start = document.getElementById("start_btn");/**gathers buttons**/
    var p1_back = document.getElementById("p1_back");
    var p1_next = document.getElementById("p1_back");

    var p2_back = document.getElementById("p2_back");
    var p2_next = document.getElementById("p2_back");

    start.onclick=function(){
        page01.style.display="block";
        welc_p.style.display="none";
        window.location="#page01";
        };

    }/**function**/

那么我在html中的调用方式是

<div class="some_class" id="start_btn" onClick="PageChange()">!!!LETS GET STARTED!!!</div>

这里还有一个 fiddle。 https://jsfiddle.net/Optiq/42e3juta/

每次我想创建这个功能时，我通常都是这样构造它的。我在这里看到很多关于他们的项目需要点击 2 次才能激活的帖子，但是 none 他们中的任何人都在做任何接近我想要完成的事情，而且他们的问题似乎出在他们的编码中。有人知道为什么会这样吗？

Answer 1

这是因为您在单击按钮时将 event handler 附加到您的按钮。
这意味着单击按钮会激活事件处理程序，而不是 start.onclick=function() {
中的代码然后，第二次点击起作用，因为事件处理程序已被激活，现在代码将运行.

尝试将您的代码移出该函数，然后只需单击一下即可运行

Answer 2

刚遇到同样的问题，并根据上述答案找到了一个简单的解决方案。因为你的函数需要点击两次才能工作，我只是调用了函数上面的函数，它工作正常。这样函数在加载时已经调用了一次，然后在您单击它时调用了第二次。

yourFunction();

function yourFunction(){
  -- content -- 
}

Answer 3

我在初始交互中也需要同样的 2 次点击，经过多次搜索后找不到适合我的特定导航菜单的最佳解决方案。我尝试了上面的解决方案，但无法正常工作。

从 youtube 示例中偶然发现这段代码，它解决了我的问题。我想嵌套多个级别的子菜单，并从其原始实现中对其进行了修改，以使其最适合我的响应式移动菜单。

var a;
function toggleFirstLevelMobileSubMenu(){
    if(a==1){
        document.getElementById("mobile-sub-menu-depth-1").style.display="none";
        return a=0;
    }
    else {
        document.getElementById("mobile-sub-menu-depth-1").style.display="flex";
        return a=1;
    }
}

var b;
function toggleSecondLevelMobileSubMenu(){
    if(b==1){
        document.getElementById("mobile-sub-menu-depth-2").style.display="none";
        return b=0;
    }
    else {
        document.getElementById("mobile-sub-menu-depth-2").style.display="flex";
        return b=1;
    }
}

当然，在 CSS 中，我为两个 ID 都设置了 display: none。

为什么我的 onClick 函数需要点击两次

why do my onClick functions take two clicks

javascript

css

onclick