Странное поведение при наведении курсора мыши на текстовую область в Chrome

У меня странная проблема, с которой я не могу справиться. Он присутствует только в Chrome. Я использую библиотеку Prototype 1.6.

По сути, у меня есть два элемента, завернутые в элемент контейнера. Первый из двух дочерних элементов виден, второй скрыт. Внутри скрытого элемента у меня есть элемент textarea. Когда я нахожу элемент контейнера, первый дочерний элемент должен скрываться, а второй должен отображаться. Когда я выхожу из мыши, поведение должно быть противоположным. Вы можете увидеть это здесь, вместе с ошибкой :)

http://jsfiddle.net/gmM9m/2

По какой-то причине в Chrome, когда я навожу курсор на текстовое поле, элементы начинают мигать, потому что они постоянно включаются и выключаются. Кто-нибудь знает, что вызывает такое поведение и как я могу его обойти?

Благодарю вас! Лука


javascript google-chrome textarea mouseover prototypejs
person Lukich    schedule 21.04.2011    source источник
comment
Кажется, что Chrome запускает onmouseout при перемещении по текстовой области, поэтому кажется, что он не распространяется правильно. Я смотрю, смогу ли я найти способ, который не кажется хакерским.   -  person Robert    schedule 21.04.2011

Ответы (3)


arrow_upward
1
arrow_downward

Самое близкое, что я получил, это добавить событие в функцию обратного вызова для mouseout и убедиться, что оно исходит от нужного вам элемента. Это кажется хакерским, но, возможно, это ошибка в Chrome. Я тоже это вижу, но wong2, кажется, не видит.

Смотрите мою версию, все еще небольшое заикание при первоначальном наведении курсора.

http://jsfiddle.net/gmM9m/10/

person Robert    schedule 21.04.2011
comment
Спасибо. Это намного ближе, чем я, но мне, вероятно, придется попытаться найти другой способ макета моей страницы из-за этого начального заикания. Надеюсь скоро выйдет исправление. - person Lukich; 21.04.2011

arrow_upward
0
arrow_downward

Это работает для меня (я не знаком с методом JQuery observe, поэтому вместо этого я использую JavaScript addEventListener)

$('container').addEventListener("mouseover", function(event){
    $('front').hide();
    $('back').show();
    event.stopPropagation();
}, false);

$('container').addEventListener("mouseout", function(event){
    $('front').show();
    $('back').hide();
    event.stopPropagation();
}, false);

Дело в stopPropagation. Запустите его здесь: http://jsfiddle.net/RDXzR/

Почему голосование против? Это действительно работает для меня. Оператор все равно не упомянул версию своего Chrome, когда я публикую это.

person wong2    schedule 21.04.2011
comment
Я все еще получаю такое же поведение. Попробуйте навести указатель мыши на текстовую область, и вы поймете, что я имею в виду. Еще раз, это только для Chrome. - person Lukich; 21.04.2011
comment
@Lukich Я знаю, что ты имеешь в виду, и это действительно работает для меня. Я протестировал его с помощью Chrome dev 12.0.725 на Windows7. - person wong2; 21.04.2011
comment
Хорошо, я проверил сборки Chrome 10.0.648.205 для Windows и Mac, и у меня это происходит на обеих версиях, поэтому, возможно, проблема будет исправлена ​​в следующем выпуске. - person Robert; 21.04.2011

arrow_upward
0
arrow_downward

Я только что столкнулся с подобной проблемой и решил ее с помощью jquery "mouseenter" и события "mouseleave", см. http://api.jquery.com/mouseenter/

person Nikes    schedule 01.06.2011
comment
Спасибо! К сожалению, мы все еще используем Prototype в работе :( - person Lukich; 02.06.2011