如何在JS / HTML中的ondblclick之前停止点击 [英] How to stop onclick from firing before ondblclick in JS/HTML
问题描述
< html lang =en>
< head>
< title>可见性控制< / title>
< meta charset =utf-8/>
< script type =text / javascriptsrc =showHide.js>
< / script>
< / head>
< body>
< form action =>
< div id =saturnstyle =position：relative;
visibility：visible;>
alt =（土星图片）/>
< / div>
< p>
< br />
< input type =buttonvalue =显示/隐藏
onclick =ShowIMG（）ondblclick =HideIMG（）/>
< / p>
< / form>
< / body>
< / html>
这是html部分。我在这里做的是当用户点击一次按钮时，会调用showIMG函数来显示图像。当用户在3秒内点击两次时，hideIMG函数被调用，图像消失。
函数ShowIMG（）
{
dom = document.getElementById（saturn）。style;
if（dom.visibility ==hidden）
{
dom.visibility =visible;
函数HideIMG（）
{
var theDelay = 3000;
$ b setTimeout（function（）
{
dom = document.getElementById（saturn）。style;
if（dom.visibility == 可见）
{
dom.visibility =hidden;
}
}，TheDelay）;
}
ondblclick事件首先触发onclick事件。所以它与代码混淆。
确定如此不同的方法来实现更多目标：
HTML
< input type =buttonvalue =显示/隐藏onclick =ShowIMG（）/>
JS
var timer;变成
var counter = 0;
函数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）;
$ b $ p
$ b使用此解决方案时，用户点击时会启动超时并在3秒内，如果他点击更多（意味着至少第二次），那么它会隐藏
dom，否则（不再点击）它会显示它。
根据您在此期待的确切行为（非常不清楚），您可以根据条件重置计时器（例如，定时器之前的奇数次点击火灾）与clearTimeout。如果（计数器> 1）if（counter％2 == 0），你也可以改变，这意味着偶数次点击将被隐藏起来。
只需使用它即可。
<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.
解决方案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 theif (counter>1)toif (counter%2==0), meaning that an even number of clicks will hide.Just play with it.
这篇关于如何在JS / HTML中的ondblclick之前停止点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
