Переместить активный элемент теряет событие мыши в Internet Explorer
-
02-10-2019 - |
Вопрос
В библиотеке я использую, у меня есть задача перемещения элемента перед передней частью 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);
}
});
Примеры
- Учебинная демонстрация вашего
- Пример демонстрируя
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:
Я модифицировал ответ @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.