CSS元素样式设置正确onMouseDown，为什么不希望重置onMouseUp

CSS element style set properly onMouseDown, why undesired reset onMouseUp?

本文关键字：希望 为什么不 onMouseUp onMouseDown 样式 元素 设置 CSS      更新时间：2023-09-26

我有一些标题text/javascript:

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

正文I do:

<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时，弹出框按预期出现…但只要我鼠标向上，弹出窗口就消失了。我希望它一直存在，直到"X"(在第二个锚标记中)被单击。在第一个锚标记我尝试onMouseUp="，但不高兴。在Chrome和Firefox中也是如此。

该怎么办?

Thanks in advance

您需要将链接的href属性设置为"#"。一个空的href属性将重新加载当前页面，这就是您所看到的。这并不是说弹出窗口消失了，而是当你鼠标向上移动时，页面会刷新!

。

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

或者，您可以在onmousedown事件上设置"return false;"。它通过告诉链接

来阻止链接执行重定向:
  1. 防止默认行为，和
  2. 不会将事件弹出到父元素(在链接上单击也会在链接的父元素上执行单击，等等)。

。

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