javascript - 应用于 <a> 的简单 onclick 不工作 IE 和 FF

Question

我有一个简单的列表如下:

<div class="settingButton"><a href="#"></a>
     <div class="subManu">
           <ul>
               <li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
               <li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
                <div class="clear"></div>
            </ul>
            <div class="clear"></div>
      </div>
</div>

我没有看到单击链接时的警报!它在 Chrome 中工作正常，但在 IE 和 FF 中却不行。我在没有分配类的情况下使用了相同的结构，并且它按预期工作。也许问题出在 CSS 上，但我不确定是什么。这是下拉菜单的 CSS，

.settingButton { 
   background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
   width:25px; 
   height:37px; 
   float:left; 
   position:absolute;
   right:13px;
   top:-30px;
}
.settingButton a {
   display:block;
   width:25px;
   height:37px;
}
.settingButton:hover {
   background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
   background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
   display:none;
   height:100px;
}
.settingButton:hover div.subManu {
   background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;    
   position:absolute;
   top:20px;
   z-index:99;
   right:0;
   width:250px;
   height:50px;
   display:block;
   padding:13px 0 0 0;
}
div.subManu ul {
   display:block;
   background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
   border-left:#547b9a 1px solid;
   border-right:#547b9a 1px solid;
   height:29px;
   padding:0 0 0 7px;
}
div.subManu ul li {
   width:110px;
   float:left;
   margin:0 5px;
   display:block;
   height:29px;
}
div.subManu ul li a {
   display:inline;
   color:#ffffff;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:normal;
   line-height:28px;
}
div.subManu ul li a:hover {
   color:#b7f630;
}
div.subManu ul li.active-manu a {
   color:#b7f630;
}

我经历了不同的问题，但没有找到任何相关的答案。如果您需要更多信息，请告诉我。

谢谢!

Answer 1

如果您不需要链接，请不要使用 A 元素，而是使用按钮或样式化的 span，例如

<style type="text/css">
  .clickable:hover {
    text-decoration: underline;
    cursor: pointer;
  }
 </style>
 ...
 <span class="clickable">thing to click</span>

无论如何，链接的首选方法是:

<a href="http://link for script-disabled browsers" 
   onclick="myFunction(); return false;">...</a>