Firefox 中的 jQuery Mouseenter/Mouseleave 问题
我仅在 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 才会遇到同样的问题。
I'm having a problem with the mosueenter/mouseleave events only in Firefox...
<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>
I only want to know when the mouse has left the containing DIV.
But if you either move the mouse over a textbox really fast or move the mouse over the scrollbar of a div, the events fire.
--EDIT--
$("#theDiv").hover(function() {
$("#output").append('hoverin<br>');
}, function() {
$("#output").append('hoverout<br>');
});
I tried the following with hover.
It seems to suffer from the same issue only in Firefox.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
此行为与 firefox 错误有关，该错误已在 Firefox 3.6 中修复。 jQuery 尝试使用 insideElement 函数（搜索 jQuery 源代码）来处理此错误，但解决方案并不完美。
This behavior is related to a firefox bug, that has been fixed in Firefox 3.6. jQuery tries to handle this bug with withinElement function (search through jQuery source code), but the solution isn't perfect.
我几乎总是发现最好使用 hover() 方法或 hoverIntent() 插件而不是单独的 mouseenter/mouseleave 处理程序（如果您打算执行操作）当鼠标进入和离开元素时。这两个似乎都处理可能的鼠标移动事件的范围，而不仅仅是映射到 mouseenter/mouseleave 。
I almost always find that it's better to use the hover() method or the hoverIntent() plugin rather than separate mouseenter/mouseleave handlers if you are planning to do things both when the mouse enters and leaves an element. Both of these seem to handle the range of possible mouse movement events rather than just mapping onto mouseenter/mouseleave.