onClick 未在子 div 上调用

Question

I have an 'outermost' or 'parent' div that has two child divs:

1) the 1st child div is visible on page load, inside the parent div (I put borders around these divs to keep visual track of them), and this 1st child div simply contains a text string.

2) the other div is "display:none" at page load time. I'll call this div the "mouse hover div" below.

3) this "mouse hover div" gets displayed on mouseover, and has an 'onclick' handler that displays some text in a div at the bottom of the page.

The onmouseover event handled by the parent div hides the 1st child div (and hence its text string), then shows the 2nd, previously-hidden div by setting its "style: block".

As tested, when the mousemove happens over the parent div, the parent div's "onmousemove" hides the 1st div and shows the other div -- all that works fine.

The problem is, the "mouse hover div" is never having its 'onclick' handler called when the mouse is clicked on it. I can tell because the 'onclick' code fails to display its text string in the div at the page's bottom.

Here is the code (note: not using jquery in this project):

 <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>

Here are the mouse handlers:

 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";        
 }

Here's the CSS:

 .popupMenuFrame
 {
     font-size: 11px;
     min-width: 28px; 
     min-height: 12px; 
 }


 .hoverDivClass
 {
     display: none;
     width: 100%;
 }

You'll notice I tried calling the mouse click handler both for onmousedown and onclick one at a time then both together in the "hover div" html code -- no change, the mouse click event handler is not being called regardless.

Any ideas? I've tried many permutations of this code, it is conceptually simple, but not working, and I'm not seeing why.

BY THE WAY. There is a subtle timing issue involving the showing/hiding of the "hover div" because when it appears on top of its parent div, the parent div loses focus, triggering a mouseout on the parent div, which re-hides the "hover div" immediately (see the mouseout handler on the parent div), then the child hover div re-appears when the parent div re-gets focus and the mousemove event, ad infinitum as long as the mouse is hovering above.

So I've already put the 'onmouseout' into the "hover div" but that didn't change the effect, so the subtlety in the code is the "hover div" is rapidly being hidden/shown as it obscures/reveals its underneath parent div due to the mouse events appearing back-and-forth on the parent div and hover div.

Not sure if that explains why the onclick is not happening when the mouse is clicked.

Answer 1

The div that handles the mousemove event and then displays the 'hover div' was interfering with the mouse handling when the 'hover div' is made invisible again. The mouse handling is only do-able with the 'hover div' being made visible completely not overlapping the div handling the onmousemove. So for now, I changed the code above so when onmousemove fires, the div responds by making the hover div visible but not overlapping the onmousemove-handling div.

Answer 2

Just comment the below line from you function displayPopup and then click. You will find your mistake.

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

Answer 3

just type event.stopPropagation(); inside function to work onclick on both parent and child tags