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>