代码之家 › 专栏 › 技术社区 › johnwards

在internet explorer中移动活动元素丢失鼠标事件

mouseout raphael mouseevent javascript-events javascript

13

johnwards · 技术社区 · 15 年前

在我正在使用的库中,当元素悬停在dom上时,我的任务是将其移动到dom的前面。(我把它变大了,所以我需要看到它,然后当鼠标离开时缩小它)。

我使用的图书馆有一个整洁的解决方案 appendChildren 在活动元素上,将其移动到其父元素的末尾,使其更靠近dom的末尾,并依次移动到顶部。

mouseout 事件丢失。您的鼠标仍在节点上,但未触发事件。

我已经剥离了功能,以确认问题。它在Firefox中运行得很好,但在IE的任何版本中都不行。解决方案可以是普通的老Javascript,这是一个首选,因为它可能需要返回到上游。

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粘贴箱的链接,可以看到它的运行。 http://jsbin.com/obesa4

**编辑2:**在发布更多信息之前,查看所有答案的所有评论。

4 回复 | 直到 5 年前

1

15

gblazex 15 年前

问题是 IE手柄 mouseover 不同的 ,因为它的行为 mouseenter 和 mousemove 结合在一个元素上。在其他浏览器中 滑鼠 .

所以即使你的鼠标已经进入了目标元素,你已经改变了它的外观,并重新将它添加到它的父元素 鼠标盖 仍然会为每次鼠标移动触发,元素会再次被重新赋值,这会阻止调用其他事件处理程序。

解决办法是 模仿正确的 鼠标盖 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)

2

1

webXL 15 年前

我可以让它与嵌套的div和父对象上的mouseenter事件一起工作:

<div id="frame">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>
...
$('#frame').mouseenter(function() {
     $(".box").css("border-color", "black");
});

http://jsfiddle.net/xDREx/

3

1

Jake Z 12 年前

我修改了@galambalazs的答案,因为我发现如果我将鼠标悬停在li元素上的话,它就会失败,因为有些元素仍然会保留 mouseover 效果。

我提出了一个解决方案,可以删除未能触发事件的元素上的悬停状态 鼠标盖 事件,只要 鼠标盖 或 mouseout 事件时,我从该数组中弹出元素并删除放置在其上的样式:

$(function(){

    // Track any hovered elements
    window.hovered = [];

    $("li").mouseover(function() {
        // make sure that these actions happen only once
        if ( $(this).css("border-color") != "red" ) {
            resetHovered ();  // Reset any previous hovered elements
            $(this).css("border-color","red");
            this.parentNode.appendChild(this);
            hovered.push(this);
        }
    });

    $("li").mouseout(function(){
        resetHovered();  // Reset any previous hovered elements
    });

    // Reset any elements on the stack
    function resetHovered () {
        while ( hovered.length > 0 ) {
            var elem = hovered.pop();
            $(elem).css("border-color","black");
        }
    }
});

我用IE11测试过这个解决方案。可以找到一个功能示例 here .

4

0

gilly3 15 年前

这是不可靠的,似乎只是IE(但也是VML)。如果父元素指定了高度,可以将mouseout处理程序附加到父元素。。。但听起来在你的情况下这是行不通的。最好的选择是在相邻元素上使用鼠标悬停来隐藏它:

$(function()
{
    $("li").mouseover(function()
    {
        $("li").css("border-color", "black");
        $(this).css("border-color", "red");
        this.parentNode.appendChild(this);
    });
});