joh*_*rds 13 javascript javascript-events mouseevent mouseout raphael
在我正在使用的库中,我的任务是将元素移动到dom的前面.(我把它做得更大所以我需要看到它,然后当鼠标移出时缩回它).
我正在使用的库有一个简洁的解决方案,它使用活动元素上的appendChildren将它移动到它的父节点的末端,从而进一步朝着dom的末尾移动,然后在顶部.
问题是我相信,因为您正在移动的元素是您在鼠标移动事件上移动的元素丢失.您的鼠标仍在节点上,但未触发mouseout事件.
我已经删除了功能以确认问题.它在Firefox中运行良好,但在任何版本的IE中都没有.我在这里使用jquery来提高速度.解决方案可以是简单的旧javascript ..这将是一个偏好,因为它可能需要回到上游.
我不能在这里使用z-index,因为元素是vml,库是Raphael,我正在使用toFront调用.使用ul/li的示例在一个简单示例中显示问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
li
{
border:1px solid black;
}
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
$("li").mouseover(function(){
$(this).css("border-color","red");
this.parentNode.appendChild(this);
});
$("li").mouseout(function(){
$(this).css("border-color","black");
});
});
</script>
</body>
</html>
编辑:这是一个js粘贴bin的链接,以查看它的实际效果.http://jsbin.com/obesa4
**编辑2:**在发布更多信息之前,请查看所有答案的所有评论.
gbl*_*zex 15
问题是IE的处理方式mouseover不同,因为它在元素上表现得像mouseenter并且mousemove组合在一起.在其他浏览器中它只是mouseenter.
因此,即使您的鼠标已经进入目标元素并且您已经改变了它的外观并重新连接到它,它的父节点mouseover仍将为鼠标的每次移动触发,该元素将再次重新悬浮,这将阻止其他事件处理程序被调用.
解决方案是模拟正确的mouseover行为,以便onmouseover只执行一次操作.
$("li").mouseover( function() {
// make sure these actions are executed only once
if ( this.style.borderColor != "red" ) {
this.style.borderColor = "red";
this.parentNode.appendChild(this);
}
});
例子
| 归档时间： |
|
| 查看次数： |
8156 次 |
| 最近记录： |