5

2 つの子 div を持つ「最も外側」または「親」の div があります。

1) 最初の子 div は、ページの読み込み時に親 div 内に表示され (これらの div を視覚的に追跡するためにこれらの div の周りに境界線を配置します)、この 1 番目の子 div には単にテキスト文字列が含まれています。

2) 他の div は、ページの読み込み時に「display:none」です。以下では、この div を「マウス ホバー div」と呼びます。

3) この「マウス ホバー div」はマウスオーバーで表示され、ページの下部にある div にテキストを表示する「onclick」ハンドラーがあります。

親 div によって処理される onmouseover イベントは、最初の子 div (したがってそのテキスト文字列) を非表示にし、「style: ブロック」を設定することによって、以前に非表示にされた 2 番目の div を表示します。

テストしたところ、親 div で mousemove が発生すると、親 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 の両方で一度に 1 つずつマウス クリック ハンドラーを呼び出してから、「hover div」html コードで両方を一緒に呼び出してみたことに気付くでしょう。変更はありません。マウス クリック イベント ハンドラーは関係なく呼び出されません。

何か案は？このコードの多くの順列を試しましたが、概念的には単純ですが、機能していません。その理由はわかりません。

ところで。「ホバー div」が親 div の上に表示されると、親 div がフォーカスを失い、親 div でマウスアウトがトリガーされ、「ホバー div」が再非表示になるため、「ホバー div」の表示/非表示に関連する微妙なタイミングの問題があります。 " すぐに (親 div の mouseout ハンドラーを参照)、親 div が再びフォーカスを取得すると、子ホバー div が再表示され、mousemove イベントは、マウスが上にある限り無限に続きます。

だから私はすでに「onmouseout」を「ホバー div」に入れましたが、それは効果を変えませんでした。親 div とホバー div で前後に表示されるマウス イベントによる親 div。

マウスがクリックされたときにonclickが発生しない理由を説明しているかどうかはわかりません。

4

3 に答える 3