Firefoxでのみmosueenter/mouseleaveイベントに問題があります...
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.js"></script>
<script>
$(document).ready(function() {
$("#theDiv").mouseenter(function() {
$("#output").append('mouseenter<br>');
});
$("#theDiv").mouseleave(function() {
$("#output").append('mouseleave<br>');
});
});
</script>
</HEAD>
<BODY>
<div id="theDiv" style="position:relative; height: 300px; width:300px; background-color:Black;">
<input type="text" style="position:absolute; top: 40px;" />
<div style="position:absolute; top:100px; height:100px; width:100px; background-color:Red; overflow:auto;">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div id="output"></div>
</BODY>
</HTML>
マウスが含まれているDIVを離れたときだけ知りたいです。ただし、マウスをテキストボックス上で非常に高速に移動するか、マウスをdivのスクロールバー上で移動すると、イベントが発生します。
- 編集 -
$("#theDiv").hover(function() {
$("#output").append('hoverin<br>');
}, function() {
$("#output").append('hoverout<br>');
});
ホバーで以下を試してみました。Firefoxでのみ同じ問題が発生するようです。