onClick 未在子 div 上调用

Question

我有一个“最外层”或“父”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 代码中同时调用两者 - 没有变化，鼠标单击事件处理程序是 not 无论如何都会被调用。

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

只需在函数内输入event.stopPropagation(); 即可在父标签和子标签上点击。