可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
<html lang = "en"> <head> <title> Visibility control </title> <meta charset = "utf-8" /> <script type = "text/javascript" src = "showHide.js" > </script> </head> <body> <form action = ""> <div id = "saturn" style = "position: relative; visibility: visible;"> <img src = "../images/saturn.png" alt = "(Pictures of Saturn)" /> </div> <p> <br /> <input type = "button" value = "Show/Hide" onclick = "ShowIMG()" ondblclick = "HideIMG()" /> </p> </form> </body> </html>
This is the html part. What What I've done here is when the user clicks the button once, a showIMG function is called to show the image. When the user clicks it twice within 3 seconds the hideIMG function is called and the image disappears instead.
function ShowIMG() { dom = document.getElementById("saturn").style; if (dom.visibility == "hidden") { dom.visibility = "visible"; } } function HideIMG() { var theDelay = 3000; setTimeout(function() { dom = document.getElementById("saturn").style; if (dom.visibility == "visible") { dom.visibility = "hidden"; } }, theDelay); }
The ondblclick event fires the onclick event first. So it messes with the code.
回答1:
Ok so different approach to more target what you want here:
HTML
<input type="button" value="Show/Hide" onclick="ShowIMG()" />
JS
var timer; var counter = 0; function ShowIMG() { if (counter++ == 0) { timer = window.setTimeout(function(){ dom = document.getElementById("saturn").style; if (counter>1) { dom.visibility = "hidden"; } else { dom.visibility = "visible"; } counter = 0; }, 3000); } }
With this solution, a timeout starts when the user clicks and within 3 seconds from then, if he clicks more (meaning at least a second time) then it'll hide dom, otherwise (no more clicks) it'll show it.
Depending on the exact behaviour you're expecting here (very unclear), you could reset the timer based on conditions (for example, odd number of clicks before the timer fires) with clearTimeout. You could also change the if (counter>1) to if (counter%2==0), meaning that an even number of clicks will hide.
Just play with it.
回答2:
You can delay the execution of the onclick to see if it actually was a double click. You will lose in responsiveness though:
var dble = false; function ShowIMG() { window.setTimeout(function(){ if(!dble){ dom = document.getElementById("saturn").style; if (dom.visibility == "hidden") { dom.visibility = "visible"; } } dble = false; }, 500); //this is how long it waits for the double click } function HideIMG() { dble = true; dom = document.getElementById("saturn").style; if (dom.visibility == "visible") { dom.visibility = "hidden"; } }
See the 500 delay in the timeout? This is how long it'll wait (in milliseconds) to see if a double click fires. The shorter the better (for responsiveness) but also the shorter the more risk there is for a double click to happen after anyway.
回答3:
If you want to change the doubleclick delay to 3 seconds, you'd have to basically make the doubleclick mechanism yourself:
function ShowIMG() { var saturn = document.getElementById("saturn").style; if (!window.clicked) { //show image saturn.visibility = "visible"; //remember the user's click window.clicked = setTimeout(function() { window.clicked = false; }, 3000); } else if (window.clicked) { clearTimeout(window.clicked); //reset window.clicked = false; saturn.visibility = "hidden"; } }
with your HTML code being:
<input type="button" value="Show/Hide" onclick="ShowIMG()" />
Demo
This code will show the image when the viewer clicks once on the button, and when they click again within 3 seconds of the first click, the image hides.
If the user clicks twice, and then 2 seconds later they click again, it will show up again as expected from a single click. If the user clicks three times fast, it will not show up, since it is not considered a single click then.
