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が発生しない理由を説明しているかどうかはわかりません。