简单的onclick应用于<a>无法正常工作的IE和FF</a>

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元素，而应使用按钮或样式化的跨度，例如

<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>

Answer 2

参考： jsFiddle

您会注意到我仅对您的代码进行了两项更改。

第一个更改是包括悬停div的背景色。

第二个更改是使字体单词在白色背景上可见，因为字体本身就是白色的。

要查看两个单击事件均有效，将鼠标悬停在右上角的黑色矩形上，您将看到两个链接会弹出，并在单击时允许调用警报。

最重要的是，您的代码 没有错 ，只是您需要将鼠标悬停以访问可点击的链接。

免责声明：仅用于问题，不涉及其他内容，例如锚链接的首选方法。 ;-)

Answer 3

您可能想尝试这样的事情：

    <a href="javascript: alert('clicked!!')">Default Categories</a>