3

onmouseout動的に作成されたHTML要素で使用すると、イベントに問題が発生します。

これはHTMLコードです：

<div id="imageWrapper">
    <img src="imageUrl" alt="">
</div>

これはJavaScriptコードの一部です（jQuery 1.7.2を使用）。

$('body').on('mouseout', 'div#imageWrapper', function () {
    alert("Test");
});

明らかに、私が欲しいのは、マウスがいつ離れるかを検出しdiv#imageWrapper、アラートメッセージを表示することです。

そしてそれは機能しますが、私が期待したようには機能しません：

マウスが離れるとアラートが表示されますが、マウスのdiv#imageWrapper内側が要素の上にあると、それも表示されます（要素がの「外側の部分」であるかのように）。奇妙なことに、マウスが画像を離れると（ただし、マウスは画像上にとどまります）、アラートメッセージも表示されます。divimgimgdivdiv

結論： JavaScriptは、div#imageWrapperとそのimg中の要素の両方を2つdiv#imageWrapperの異なるとして扱います。

誰かがこれを修正する方法を知っていますか？

4

1 に答える 1

3

代わりにmouseenterandを使用します。mouseleave

$('body').on('mouseleave', 'div#imageWrapper', function () {
    alert("Test");
});
于 2012-08-22T20:17:07.367 に答える