首页 > 编程语言> > javascript – 移动活动元素在Internet Explorer中丢失mouseout事件

javascript – 移动活动元素在Internet Explorer中丢失mouseout事件

2019-09-29 00:48:52 作者：互联网

在我正在使用的库中,我的任务是将元素移动到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：**在发布更多信息之前,请查看所有答案的所有评论.

解决方法:

问题是IE处理鼠标悬停的方式不同,因为它的行为类似于mouseenter和mousemove结合在一个元素上.在其他浏览器中,它只是mouseenter.

因此,即使您的鼠标已经进入目标元素并且您已经改变它的外观并将其重新附加到它的父鼠标悬停仍然会触发鼠标的每次移动,该元素将再次重新悬浮,这将阻止其他事件处理程序被调用.

解决方案是模拟正确的鼠标悬停行为,以便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);
    }
});

例子

> Extented demo of yours
> Example演示浏览器之间的鼠标悬停差异(奖金：原生javascript)

标签：mouseout,javascript,javascript-events,mouseevent,raphael
来源： https://codeday.me/bug/20190928/1829747.html