我有一个“最外层”或“父”div，它有两个子 div：
1）第一个子 div 在页面加载时可见，在父 div 内（我在这些 div 周围放置边框以保持视觉跟踪它们），并且这个第一个子 div 只包含一个文本字符串。
2) 另一个 div 在页面加载时是“display:none”。我将在下面将此 div 称为“鼠标悬停 div”。
3) 这个“鼠标悬停 div”会在鼠标悬停时显示，并且有一个“onclick”处理程序，可以在页面底部的 div 中显示一些文本。
父 div 处理的 onmouseover 事件隐藏第一个子 div（以及它的文本字符串），然后通过设置其“样式：块”显示第二个先前隐藏的 div。
经测试，当鼠标移动发生在父 div 上时，父 div 的“onmousemove”会隐藏第一个 div 并显示另一个 div——一切正常。
问题是，当鼠标点击它时，“鼠标悬停 div”永远不会调用它的“onclick”处理程序。我可以说是因为“onclick”代码无法在页面底部的 div 中显示其文本字符串。
这是代码（注意：在这个项目中没有使用jquery）：
<div id="theParentDiv" class="popupMenuFrame" style="border: 2px solid red;"
onmouseover="displayPopup()" onmouseout="doMOut()">
<div id="theLocale" style="border: 2px solid green; display: inline-block">
Austin, TX
</div>
<div class="hoverDivClass" id="theHoverDiv" style="border: 2px solid purple;"
onclick="handleMenuClick()"
onmousedown="handleMenuClick()">
Austin
</div>
</div>
// These are for debug output at the bottom of the page
<div id="debugOut1" style="font-weight: bold; width: 100px">debug #1</div>
<div id="debugOut2" style="font-weight: bold; width: 100px">debug #2</div>
以下是鼠标处理程序：
function displayPopup()
{
var localeName = document.getElementById('theLocale');
localeName.style.display="none";
var thePopupMenu = document.getElementById('theHoverDiv');
thePopupMenu.style.display = "block";
// this is a div at page-bottom telling me the mouse events
var dbgport2 = document.getElementById("debugOut2");
dbgport2.innerHTML = "showing popup....";
}
// THIS IS THE PROBLEM, IT'S NOT GETTING CALLED when the mouse is
// clicked ON THE "hover" DIV
function handleMenuClick()
{
var localeName = document.getElementById('theLocale');
localeName.style.display="block";
var thePopupMenu = document.getElementById('theHoverDiv');
thePopupMenu.style.display = "none";
var dbgport2 = document.getElementById("debugOut2");
// THIS TEXT NEVER APPEARS.
dbgport2.innerHTML = "got menu click!";
}
function doMOut()
{
var dbgport1 = document.getElementById("debugOut1");
dbgport1.innerHTML = "got mouse OUT";
var localeName = document.getElementById('theLocale');
localeName.style.display="block";
var thePopupMenu = document.getElementById('theHoverDiv');
thePopupMenu.style.display = "none";
}
这是CSS：
.popupMenuFrame
{
font-size: 11px;
min-width: 28px;
min-height: 12px;
}
.hoverDivClass
{
display: none;
width: 100%;
}
您会注意到我尝试一次为 onmousedown 和 onclick 调用鼠标单击处理程序，然后在“悬停 div”html 代码中一起调用鼠标单击处理程序——没有变化，鼠标单击事件处理程序无论如何都不会被调用。
有任何想法吗？我已经尝试了此代码的许多排列，它在概念上很简单，但不起作用，我不明白为什么。
顺便一提。有一个微妙的时间问题涉及“悬停 div”的显示/隐藏，因为当它出现在其父 div 顶部时，父 div 失去焦点，触发父 div 上的鼠标移出，重新隐藏“悬停 div” " 立即（参见父 div 上的 mouseout 处理程序），然后当父 div 重新获得焦点和 mousemove 事件时，子悬停 div 会重新出现，只要鼠标悬停在上面，就会无限循环。
所以我已经把'onmouseout'放到了“hover div”中，但这并没有改变效果，所以代码中的微妙之处在于“hover div”正在迅速被隐藏/显示，因为它隐藏/显示了它的下面父 div 由于鼠标事件在父 div 和悬停 div 上来回出现。
不确定这是否解释了为什么单击鼠标时没有发生 onclick。