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/

这通常是我每次想要创建此功能时的结构。我在这里看到了大量关于他们的项目的其他帖子，他们点击了2次点击激活，但他们都没有做任何接近我想要完成的事情，看起来他们的问题在他们的编码中。有人知道为什么会这样吗？

Answer 1

这是因为您点击按钮时将event handler连接到按钮上。
这意味着只需单击该按钮即可激活事件处理程序，而不是start.onclick=function() {中的代码然后，第二次单击工作因为事件处理程序已被激活，现在代码将运行。

尝试将代码移出函数，只需单击一下即可使用

Answer 2

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

yourFunction();

function yourFunction(){
  -- content -- 
}

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

2 个答案: