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代码中一起调用 - 没有变化，鼠标单击事件处理程序不< / strong>无论如何被召唤。

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

按方式。有一个微妙的计时问题涉及显示/隐藏“悬停div”，因为当它出现在其父div的顶部时，父div失去焦点，在父div上触发mouseout，重新隐藏“hover div” “立即（参见父div上的mouseout处理程序），然后当父div重新获得焦点和mousemove事件时，子鼠标悬停div会重新出现，只要鼠标悬停在上面，就会无限制地进行。

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

不确定这是否解释了为什么单击鼠标时没有发生onclick的原因。

Answer 1

当'hover div'再次变为不可见时，处理mousemove事件然后显示'hover div'的div正在干扰鼠标处理。鼠标处理只能在'hover div'可见完全不重叠处理onmousemove的div时执行。所以现在，我更改了上面的代码，所以当onmousemove触发时，div通过使悬停div可见但不与onmousemove处理div重叠来响应。

Answer 2

只需在您的函数displayPopup中注释以下行，然后单击。你会发现你的错误。

dbgport2.innerHTML = "showing popup...."; //comment it.

onClick没有调用子div

2 个答案: