Question

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

这是html部分。我在这里做的是当用户点击按钮一次时，调用showIMG函数来显示图像。当用户在3秒内点击两次时，将调用hideIMG函数，而图像则会消失。

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);
}

ondblclick事件首先触发onclick事件。所以它与代码混淆。

Answer 1

您可以延迟执行onclick以查看它是否实际上是双击。但是你会失去回应性：

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";
    }
}

请参阅超时中的500延迟？这是等待（以毫秒为单位）查看双击是否会触发的时间。越短越好（响应性）但也越短，无论如何双击发生的风险就越大。

Answer 2

如果你想将双击延迟更改为3秒，你必须自己完成双击机制：

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";
    }
}

使用您的HTML代码：

    <input type="button" value="Show/Hide" onclick="ShowIMG()" />

Demo

此代码将在观看者点击按钮时显示图像，当他们在第一次点击后的3秒内再次点击时，图像会隐藏。

如果用户点击两次，然后2秒后再次点击，则只需点击一次即可按预期再次显示。如果用户快速点击三次，则不会显示，因为它不会被视为单击。

Answer 3

好的方法可以更好地针对您想要的目标：

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);
    }
}

使用此解决方案，当用户点击时开始超时，然后在3秒内开始超时，如果他点击更多（意味着至少第二次），那么它将隐藏dom，否则（不再有）点击）它会显示它。

根据您在此处预期的确切行为（非常不清楚），您可以根据条件（例如，计时器触发前的奇数点击次数）和clearTimeout重置计时器。您还可以将if (counter>1)更改为if (counter%2==0)，这意味着会隐藏偶数次点击。

玩吧。

如何在JS / HTML中的ondblclick之前停止onclick

3 个答案: