Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Запутался с событиями (https://javascript.ru/forum/jquery/22801-zaputalsya-s-sobytiyami.html)

MadGest 01.11.2011 12:20

Запутался с событиями
 
Вот собственно то в чем проблема.
http://erro13.technospeech.com/

Все работает нормально пока не наводишь курсор в на поле с title. Как нужно сделать правильно что бы не было этих мерцаний?

Управляющий скрипт такой:
$(document).ready(function() {
	var box = $("<div/>").addClass("box");
	var title = $("<div/>").addClass("title").text("Title");
	for(i = 0; i < 9; i++) {
		var item = $(box).clone();
		item.append($(title).clone());
		$("#content").append(item);
	}
	$(".box").mouseover(function() {
			$(this).find(".title").fadeTo(500, 0.9);
	});
	$(".box").mouseout(function() {
		$(this).find(".title").fadeTo(500, 0.0);
	});
});

trikadin 01.11.2011 13:18

А в чём проблема, собственно? По-моему, всё нормально работает.

Black_Prince 01.11.2011 13:30

мерцание происходит потому что вызывается mouseover, потом вы наводите на элемент .title (который находится как я понял внутри элемента .box), т.о. происходит mouseout с элемента .box, но т.к. мышь опять находится на этом элементе после скрытия .title - этот элемент опять отображается (и т.д.)

решение - при mouseout проверьте элемент на который пришла мышь
$(".box").mouseout(function(event) {
	    event = event || window.event
//получаем объект на который ушла мышь
	    var relatedTarget = event.relatedTarget || event.toElement


далее проверяем является ли этот элемент "ребенком" элемента .box - например через parent(). Если да, то не скрываем, если нет - скрываем.

trikadin 01.11.2011 14:37

Бред. Так как .title является потомком .box, при движении по нему mouseout для .box происходить не должен. Плюс - элемент не прячется, у него просто нулевая прозрачность. Это означает, что все события будут происходить для .title.

trikadin 01.11.2011 14:38

В этих двух строчках что происходит?

var box = $("<div/>").addClass("box");
var title = $("<div/>").addClass("title").text("Title");

Black_Prince 01.11.2011 17:00

trikadin, бред говорите??? нюню...

я просто сам с таким сталкивался, когда происходило мерцание элементов при использовании mouseover, mouseout. Поэтому рассказываю как я сам с этим боролся.

MadGest 02.11.2011 01:19

К сожалению желаемый результат не достигнут (((( Жду помощи...

trikadin 02.11.2011 01:34

Black_Prince, а обработчик вешали через jquery? Это может быть последствием её использования...

MadGest, попробуйте добавить обработчик стандартными способами.

рони 02.11.2011 01:35

MadGest,
Попробуйте заменить mouseout на mouseleave

MadGest 02.11.2011 08:20

Спасибо за mouseleave. Действительно помогло!


Часовой пояс GMT +3, время: 01:35.