jquery - 从图像区域形状和 html 按钮执行的 onclick 事件的不同行为

Question

HERE我有一个示例来说明我的问题。

如果滚动到第 41 行，您可以隐藏/显示固定框。它按预期工作:半透明框隐藏并且页面保持安静。但是，如果您单击底部图像，该框也会隐藏，但页面会滚动到顶部。

如何避免这种情况并将页面固定在用户滚动的位置？

<div id="container">
    <div id="box" class="oculto">BOX BOX</div>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
    21<br>32<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
    31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>

    <button onclick="$('#box').hide();">Hide the box </button><br>  
    <button onclick="$('#box').show();">Show the box </button><br>     
    <img src="http://static.adzerk.net/Advertisers/4c4f1be011a447efbce49c1811022e7a.png" width="330" border="0" usemap="#Map" /> 

 </div>

<map name="Map" id="Map">
<area shape="rect" coords="3,3,320,84" href="#" onclick="$('#box').hide();"/>  

CSS

#container {
width: 400px;
background-color:yellow;
position:relative; 
z-index:2;
min-height:1000px;
}

#box{
width:400px; 
height:100px;
position:fixed;
top:0;
z-index:100000;
background-color:black;
color:yellow;
opacity:0.5;
padding:10px;
}

Answer 1

只需去掉 map 上的 href 即可。我 forked your jsfiddle .

<area shape="rect" coords="3,3,320,84" onclick="$('#box').hide();"/>