onClick 未在子 div 上调用

Question

我有一个“最外层”或“父级”div，它有两个子 div：

1）第一个子 div 在页面加载时可见，位于父 div 内（我在这些 div 周围放置了边框以保持对它们的视觉跟踪），并且此第一个子 div 仅包含一个文本字符串。

2) 另一个 div 在页面加载时为“display:none”。我将在下面将此 div 称为“鼠标悬停 div”。

3）这个“鼠标悬停div”在鼠标悬停时显示，并且有一个“onclick”处理程序，可以在页面底部的div中显示一些文本。

父 div 处理的 onmouseover 事件隐藏第一个子 div（及其文本字符串），然后通过设置其“style: block”显示第二个先前隐藏的 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 调用鼠标单击处理程序，然后在“hover div”html 代码中一起调用两者 - 没有变化，无论如何，鼠标单击事件处理程序都不会被调用。

有任何想法吗？我已经尝试了此代码的许多排列，它在概念上很简单，但不起作用，而且我不明白为什么。

顺便一提。存在一个涉及“悬停 div”的显示/隐藏的微妙计时问题，因为当它出现在其父 div 之上时，父 div 会失去焦点，触发父 div 上的鼠标移出，从而重新隐藏“悬停 div” " 立即（请参阅父 div 上的 mouseout 处理程序），然后当父 div 重新获得焦点和 mousemove 事件时，子悬停 div 会重新出现，只要鼠标悬停在上面，就无限循环。

所以我已经将“onmouseout”放入“hover div”中，但这并没有改变效果，因此代码中的微妙之处在于“hover div”正在快速隐藏/显示，因为它模糊/显示了其下方父 div 由于鼠标事件在父 div 和悬停 div 上来回出现。

不确定这是否解释了为什么单击鼠标时未发生 onclick。

Answer 1

当“悬停 div”再次不可见时，处理 mousemove 事件然后显示“悬停 div”的 div 会干扰鼠标处理。鼠标处理只能在“hover div”完全可见且不与处理 onmousemove 的 div重叠的情况下进行。所以现在，我更改了上面的代码，以便当 onmousemove 触发时，div 通过使悬停 div 可见但不与 onmousemove-handling div 重叠来响应。