Javascript 如何在JS/HTML中单击ondblclick之前停止onclick启动

ondblclick事件首先触发onclick事件。所以它会弄乱代码。

您可以延迟onclick的执行，看看它是否真的是双击。但是，您将失去响应能力：

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

---

请参阅超时中的

500

延迟？这是双击是否触发的等待时间（毫秒）。越短越好（响应性越好），但也越短，之后发生双击的风险就越大

如果要将双击延迟更改为3秒，基本上您必须自己制作双击机制：

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

您的HTML代码为：

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

当查看器单击按钮一次时，此代码将显示图像，当他们在第一次单击后的3秒内再次单击时，图像将隐藏

---

如果用户单击两次，然后在2秒钟后再次单击，它将按照单次单击的预期再次显示。如果用户快速单击三次，它将不会显示，因为它不会被视为一次单击。

确定，因此不同的方法可以更准确地定位您想要的：

HTML

使用此解决方案，当用户单击时超时开始，然后在3秒内，如果他单击更多（意味着至少第二次），则它将隐藏

dom

，否则（不再单击）它将显示它

根据您在此处期望的确切行为（非常不清楚），您可以使用

clearTimeout

根据条件（例如，计时器启动前的奇数次单击）重置计时器。您还可以将

if（计数器>1）

更改为

if（计数器%2==0）

，这意味着将隐藏偶数次的单击

---

玩一下。

你应该把

//注释

放在你的代码之外，因为它目前正在扩展你的代码块的宽度。很好的调用，改变了它。好吧，我也试过了，但问题是一样的。什么也没有发生。请尝试删除

HideIMG（）

上的超时。试试我的解决方案和Joetje50的。我会编辑我的code@FlorianPellet我给了你们一个向上的投票（对努力的肯定），因为你们显然已经用提供的信息做了尽可能多的事情。OP只是问这个问题太不清楚了。我自己今晚就到此为止。我已经试过了，直接修改了代码。但它仍然在做同样的事情，我在3秒内点击两次，它什么也没做。但是，如果我快速发送鼠标按钮的垃圾邮件，在大约11或12次单击后，它将继续隐藏。

HideImg

函数将仅在您实际双击该元素时运行。@user3658799我已更新了我的问题。这更像你要找的吗？一个都没用。它以随机的间隔打开和关闭。我点击了4次它就熄灭了，也许5次它就熄灭了，有时它也不想再出现了。@user3658799它当前使用的是：点击一次，它就会显示出来。1秒后再次单击，它将隐藏。再单击一秒钟，它会再次显示。或者：点击一次，显示，半秒钟内再次点击，隐藏。在半秒内再次单击，它将保持隐藏状态。请看我的意思的一个例子。我也可以让它忽略三个图标，在双击后完全重置。我回家后会尝试一下。我现在已经离开了，所以大约6个小时后我会给你裁决。所以我不再需要双击事件？还有，对html文档的任何更改？这一个有效，尽管我不知道条件计数器+++==0是什么意思，这意味着我正在测试

counter==0

，然后我做

counter=counter+1为什么双击隐藏？这似乎不是很直观。为什么不单击一次显示，再单击一次隐藏？
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";
    }
}

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

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

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