CSS元素样式设置正确onMouseDown，为什么不需要重置onMouseUp？

Question

我有一些头文/ JavaScript的：

function Show() { 
    document.getElementById("Popup").style["display"] = "block"; 
} 
function Hide() { 
    document.getElementById("Popup").style["display"] = "none"; 
} 

在身体我做：

<a href="" onMouseDown="Show()" onMouseUp=""><img src="blah.jpg"/></a> 
... 
<a href="" onClick="Hide()">X</a> 

我的CSS有：

#Popup { 
    display:none; 
    background-color:#EEEEEE; 
    background: rgba(255, 255, 255, 1.0); 
    filter:alpha(opacity=80); 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 160%; 
    ... 
} 

当我点击blah.jpg弹出按预期方式出现..但只要我mouseUp弹出消失。我希望它保持呈现状态，直到点击“X”（在第二个锚标签中）。在第一个锚标签我尝试onMouseUp =“”，但不开心。在Chrome和Firefox中以相同的方式工作。

怎么办？

在此先感谢

Answer 1

您需要设置href属性为“＃”您的链接。一个空的href属性将重新加载当前页面，这就是你所看到的。这并不是说弹出窗口会消失，而是当你点击鼠标时刷新页面！

例如

<a href="#" onMouseDown="Show()" onMouseUp=""><img src="blah.jpg"/></a> 
... 
<a href="#" onClick="Hide()">X</a> 

或者，您可以设置“return false;”在您的onmousedown事件。通过它告诉给停止执行重定向的链接：

1. 阻止默认行为，并
2. 没有泡沫的情况下达到的父元素（一个点击的链接也将执行上一点击链接父元素，等等）。

例如

<a href="" onclick="Show(); return false;"><img src="blah.jpg"/></a> 
... 
<a href="" onClick="Hide()">X</a>