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

这是一个相关于IT技术的内容。这里有一个示例代码的链接：https://jsfiddle.net/Optiq/42e3juta/。每次我想创建此功能时，通常会按照以下结构进行创建。我看到很多其他帖子提到他们的项目需要2次点击才能激活，但他们都没有接近我试图实现的内容，而且似乎他们的问题在于他们的编码。是否有人知道为什么会发生这种情况？

- Optiq

Answer 1

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

尝试将代码移出函数，然后只需一次点击即可完成操作。

- joe_young

---

不，只需删除function PageChange(){这一行，以及后面匹配的}@DaMightyOptiq。 - joe_young

但如果我把它拿掉，按钮上的onclick怎么知道我要告诉它执行哪个函数？ - Optiq

这行代码 start.onclick=function(){ 应该可以解决这个问题，因为你已经定义了变量 start。 - joe_young

这是你想要的吗？https://jsfiddle.net/jofish999/d3nL727w/ @DaMightyOptiq - joe_young

好的，你可以尝试将 window.onload=function() { 放在 function PageChange() 的位置吗？记得重新添加闭合括号 }。 - joe_young

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"。

- R2D2C3POOU812

Answer 3

我遇到了相同的问题，并根据上面的答案找到了一个简单的解决方法。 由于您的函数需要两次点击才能工作，我只是在该函数之前调用了该函数，这样它就可以正常工作了。这样函数在加载时已经被调用了一次，然后在您点击它时第二次被调用。

yourFunction();

function yourFunction(){
  -- content -- 
}

- Thomas Stenstrup

Answer 4

首先，问题是：在第一次单击时，浏览器运行按钮而不是运行 JavaScript 事件。

解决方法：为了解决这个问题，我们需要确保我们的函数在事件运行之前就已经存在（这是解决问题的其中一种方法）。为了实现这一点，我们需要以某种方式加载或调用该函数。因此，我只需在函数完成后简单地调用该函数即可。

代码答案： 只需在您的代码末尾添加即可。

PageChange();

- WBdevyL