Переместить активный элемент теряет событие мыши в Internet Explorer

StackOverflow https://stackoverflow.com/questions/3686132

Вопрос

В библиотеке я использую, у меня есть задача перемещения элемента перед передней частью DOM, когда он парит. (Я делаю его больше, поэтому мне нужно увидеть его, затем уменьшить его, когда мыши).

Библиотека, которую я использую, имеет аккуратный раствор, который использует AppendChildren на активном элементе, чтобы переместить его до конца своего родителя, так что дальше к концу DOM и в свою очередь.

Проблема в том, что я считаю, что из-за того, что элемент, который вы перемещаете, это тот, который вы парят над событием мышевка, потерян. Ваша мышь все еще над узлом, но событие Mouslout не уволено.

Я обнаружил функциональность, чтобы подтвердить проблему. Он отлично работает в Firefox, но не в любой версии IE. Я использую jQuery здесь для скорости. Решения могут быть в простном старом JavaScript .. Как бы предпочтение было бы предпочтением, так как может потребоваться резервный поток.

Я не могу использовать Z-индекс здесь, так как элементы VML, библиотека Raphael, и я использую вызов Tofrolt. Образец с использованием 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: ** См. Все комментарии по всем ответам, прежде чем публиковать как много информации.

Это было полезно?

Решение

Проблема в том, что То есть ручки 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);
    }
});

Примеры

  1. Учебинная демонстрация вашего
  2. Пример демонстрируя mouseover Разница между браузерами (бонус: родной JavaScript)

Другие советы

Я смог в состоянии работать со вложенным Divs и мероприятию Mouseender на родителях:

<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");
});

Вот рабочая версия, использующая Raphael:

http://jsfiddle.net/xdrex/

Я модифицировал ответ @galambalazs, потому что я обнаружил, что оно не удалось, если я очень быстро парил в элементах Li, так как некоторые из элементов все равно сохранят mouseover эффект.

Я придумал решение, которое удаляет состояние зависания на элементах, которые не смогли вызвать mouseover событие, нажав эти элементы в стек всякий раз, когда mouseover Даже срабатывает. В любое время либо 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");
        }
    }
});

Я проверил это решение с IE 11. Функциональный пример можно найти здесь.

Это вонки, и, кажется, то есть только (но так это VML). Если родительский элемент имеет указанную высоту, вы можете прикрепить обработчик для мыши к родителю ... но звучит так, как будто не будет работать в вашей ситуации. Ваша лучшая альтернатива - использовать мыши на соседних элементах, чтобы скрыть его:

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

Или SVG. Вы можете использовать Z-индекс в SVG.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top