<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 事件。所以它弄乱了代码。
您可以延迟 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";
}
}
See the 500延迟超时？这是查看双击是否触发所需等待的时间（以毫秒为单位）。越短越好（对于响应能力），但也越短，之后发生双击的风险就越大。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
