onClick 未在子 div 上调用

Question

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

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

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

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

由父 div 处理的 onmouseover 事件隐藏第一个子 div（以及它的文本字符串），然后通过设置其“样式：块”显示第二个先前隐藏的 div。

经测试，当 mousemove 在父 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。

Answer 1

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

Answer 2

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

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

Answer 3

只需输入 event.stopPropagation(); 内部函数在父标签和子标签上工作