Javascript onclick 需要点击两次 function 才能运行

Question

Javascript onclick needs to be clicked twice for function to run. I need it to run on the first click, That is my problem. I've googled and searched for 2 days now without finding a reply that worked or that I understood.

The code for the javascript can be found here: http://enji.se/windows8/js/script.js

And the site where I want it to work: http://enji.se/windows8/

It's a Windows 8 looking website I'm trying to make. It will only display correctly on Google Chrome and on a resolution higher then 1265x820 and will be awesome on resolutions higher then 1590x920

Thank in advance / enji

SOLVED

Answer 1

The problem is inside your click handler boxBegin - the click event is received and passed to your method correctly on the first click, but inside boxBegin you are switching behaviour on the value of box.style.display - in IE9 this is initially "", which triggers your close code rather than the open code you want.

Change boxBegin to:

function boxBegin() {
    var box = document.getElementById('boxBegin');
    if (!box.style.display || box.style.display == "none") {
        box.style.display = "block";
    }
    else {
        box.style.display = "none";
    }
}

Answer 2

I googled this when I came upon the same problem.

I was checking for if window.location.hash was a certain value, then styling my menu tabs accordingly.

For me, the solution was as simple as running a 10 millisecond delay function, that then ran my main functions.

The problem for me came from a script that checked for a change at the exact same time as the change was made, not before, not after, but at the same time. This made me have to double click for it to change again, and for the function to notice the change a second time around.

Remember, it's always easier to run even a 5 millisecond delay script when things don't seem to register changes. This has helped me time and time again

Answer 3

As far as I know, onclick registers single click?

If onclick requires a double click it might be a browser specific issue.

Also from the MDC docs :

The click event is raised when the user clicks on an element. The click event will occur after the mousedown and mouseup events.

Also: simple test case @ JS Fiddle