私はこの小さな問題を抱えており、あなたの助けを求めています。次のようなdiv要素があり、その中にimg要素があります。
<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
<img id="child" src="button.png" style="visibility: hidden" />
</div>
<script type="text/javascript">
function MyFuncHover() {
// Here I have some code that makes the "child" visible
}
function MyFuncOut() {
// Here I have some code that makes the "child" invisible again
}
</script>
ご覧のとおり、画像はdivの子です。divを離れるときにのみ、子が消えるようにしたいのです。それでも、マウスを画像の上に移動すると、MyFuncOut()関数が呼び出されるように見えます (画像にカーソルを合わせて div を離れるからだと思います)。そうなってほしくない。MyFuncOut ()関数は、 div領域を離れるときにのみ呼び出されるようにします。
マウスを子コントロールの上に移動すると、親が mouseout イベントを呼び出すことを知りませんでした (子の上にいても、親の上にもいます)。私はこれに閉じ込められており、あなたの良いアドバイスが少し必要です. ありがとう!
変更点
OK イベントバブリングは、子を「マウスアウト」したときに「マウスアウト」イベントを親に送信しません。また、子を「マウスオーバー」したときに「マウスオーバー」イベントを親に送信しません。それは私が必要とするものではありません。子を「マウスオーバー」したときに、親の「マウスアウト」イベントが送信されないようにする必要があります。それを得る?イベント バブリングは、たとえば、子のクリック イベントを親に伝播させたくない場合に便利ですが、私の場合はそうではありません。奇妙なのは、同じ親内に他の要素があり、それらを「マウスオーバー」したときに親の「マウスアウト」イベントを発生させないことです。