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时，Popup按预期显示..但是当我鼠标弹出时，弹出窗口消失。我希望它保持存在，直到单击“X”（在第二个锚标签中）。在第一个锚标签中我尝试了onMouseUp =“”，但没有开心。在Chrome和Firefox中使用相同的方式。

怎么办？

提前致谢

Answer 1

您需要在链接上将href属性设置为“＃”。空的href属性将重新加载当前页面，这就是您所看到的。弹出窗口并没有消失，而是当你鼠标移动时你正在刷新页面！

e.g。

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

或者，你可以设置“return false;”在您的onmousedown活动中。这会通过告诉它来停止执行重定向的链接：

防止默认行为，
不会将事件冒泡到父元素（链接上的单击也会对链接父元素执行单击，依此类推。）

e.g。

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

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

1 个答案: