为什么我的 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>

这也是它的一个小提琴。 https://jsfiddle.net/Optiq/42e3juta/

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

Answer 1

这是因为您在单击按钮时将 事件处理程序附加到按钮。 这意味着单击按钮会激活事件处理程序，而不是
start.onclick=function() {

中的代码 然后，第二次单击起作用，因为事件处理程序已被激活，现在代码将运行。

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

Answer 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

。

Answer 3

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

yourFunction();

function yourFunction(){
  -- content -- 
}

Answer 4

重复函数调用：如果多次调用附加事件侦听器的函数，则每次调用都会向同一元素添加一个新的事件侦听器。每个监听器都会在事件发生时触发，从而导致处理程序的多次执行。

只需将代码移出函数，然后只需单击一下即可运行。

示例

function attachClickListener() {
    document.getElementById('myButton').addEventListener('click', function() {
        console.log('Button clicked!');
    });
}

// Calling the function multiple times
attachClickListener();
attachClickListener();
attachClickListener();

// Clicking the button will log 'Button clicked!' three times

Answer 5

首先，问题是：- 第一次单击时，浏览器运行的是按钮（又名事件），而不是运行 js。 解决方案：-为了解决这个问题，我们需要确保我们的函数在事件运行之前已经存在（这是解决问题的方法之一）。为了实现这一点，我们需要加载函数，也就是以某种方式调用函数。 所以，我只是在函数完成后简单地调用该函数。 代码答案-

只需在代码末尾添加

PageChange();