Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 06.08.2012, 21:50
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Не вижу смысла не использовать то что есть встроенное в браузер, причем данные события являются стандартными и не использование более быстрых нативных возможносей браузера я считаю глупо.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #22 (permalink)  
Старый 06.08.2012, 22:03
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Я бы предложил использовать делегирование и вешать обработчики на родителя (лучше прямо на body)
Ответить с цитированием
  #23 (permalink)  
Старый 06.08.2012, 22:06
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от bes
Я бы предложил использовать делегирование и вешать обработчики на родителя (лучше прямо на body)
в данной проблеме делегирование не поможет
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #24 (permalink)  
Старый 06.08.2012, 22:37
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от devote
в данной проблеме делегирование не поможет
Да, есть проблемы при быстрых уходах, хотя идея привлекательна (может быть чего-нибудь и можно сделать)

<style>
	.show {
		background: lightgreen;
		margin: 40px;
	}
	.div {
		background: lightgrey;
		padding: 2px;
	}
</style>
<div class="show">show</div>
<div class="div">
	<a href="#">link1</a><br>
	<a href="#">link2</a><br>
	<a href="#">link3</a><br>
</div>


<script>
window.onload = function () {
	document.body.onmouseout = function (e) {
		e = e || event; 
		var rt = e.relatedTarget || e.toElement;
		var target = e.target || e.srcElement;
		if (target.className == 'div' && rt.parentNode.className != 'div') {
			target.style.display = 'none';
		}
	}
	document.onmouseover = function (e)  {
		e = e || event;
		var target = e.target || e.srcElement;
		if (target.className == 'show') {
			target.parentNode.children[1].style.display = 'block';
		}
	}
}
</script>

Последний раз редактировалось bes, 07.08.2012 в 10:58.
Ответить с цитированием
  #25 (permalink)  
Старый 06.08.2012, 22:46
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от codingfighter
Столкнулся с довольно странной проблемой. Стоит родительский div в котором прописаны события onmouseover и onmouseout. Все работает, но когда наводишь курсор на ссылку внутри этого div'a чего-то срабатывает событие onmouseout


Чот не наблюдаю эффекта - скорее всего внедрена ссылка вне данного div

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cообщения</title>

</head>
<body align=center>

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">
#LinkInserTium {
  text-align:center;
  margin:0 auto;
  height:100px;
  width:100px;
  border:1px red solid;
}
#LinkInserTium:hover {
  background-color:#0000CC;
}

#LinkInserTium a {
  padding:0 4px;
  background-color:#F7F7F7;
  border:1px red solid;
}

#hover {
  display:none;

}
</style>

<div id=LinkInserTium><br />
        <a href="/sdfsdf/">ПриветБ</a>

</div>
<span id=hover>Мышь в DIV</span><span id=out>Мышь ушла с Блока</span>

<script type="text/javascript">
$("#LinkInserTium").mouseover(function(){
       $("#hover").show();$("#out").hide();
    }).mouseout(function(){
       $("#hover").hide();$("#out").show();
    });
</script>

</body>
</html>
Ответить с цитированием
  #26 (permalink)  
Старый 06.08.2012, 23:04
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Deff,
на таком примере и не заметишь, потому как браузер просто не успевает внести изменения в ДОМ, как снова нужно вернуть обратное, это заметно на таком примере:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cообщения</title>
 
</head>
<body align=center>
 
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
 
<style type="text/css">
#LinkInserTium {
  text-align:center;
  margin:0 auto;
  height:100px;
  width:100px;
  border:1px red solid;
}
#LinkInserTium:hover {
  background-color:#0000CC;
}
 
#LinkInserTium a {
  padding:0 4px;
  background-color:#F7F7F7;
  border:1px red solid;
}
 
#hover {
  display:none;
 
}
</style>
 
<div id=LinkInserTium><br />
        <a href="/sdfsdf/">ПриветБ</a>
 
</div>
<span id=hover>Мышь в DIV</span><span id=out>Мышь ушла с Блока</span>
 
<script type="text/javascript">
$("#LinkInserTium").mouseover(function(){
       document.body.appendChild(document.createTextNode('over|'));
    }).mouseout(function(){
       document.body.appendChild(document.createTextNode('out|'));
    });
</script>
 
</body>
</html>
вот тут при наведении на ссылку сработает out а потом снова over, вот именно в этом промежутке твое решение и не заметно, так как при out просто не успевает отрисоваться, как снова нужно опять отрисовывать over
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #27 (permalink)  
Старый 06.08.2012, 23:31
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

devote,
А поставь фон по hover(как у меня) и попробуй выводить и цвет фона ( если сss цвета не меняецо - мож его отслеживать на переходах ?
Ответить с цитированием
  #28 (permalink)  
Старый 06.08.2012, 23:40
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cообщения</title>
 
</head>
<body align=center>
 
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
 
<style type="text/css">
#LinkInserTium {
  text-align:center;
  margin:0 auto;
  height:100px;
  width:100px;
  border:1px red solid;
}
#LinkInserTium:hover {
  background-color:#0000CC;
}
 
#LinkInserTium a {
  padding:0 4px;
  background-color:#F7F7F7;
  border:1px red solid;
}
 
#hover {
  display:none;
 
}
</style>
 
<div id=LinkInserTium><br />
        <a href="/sdfsdf/">ПриветБ</a>
 
</div>
<span id=hover>Мышь в DIV</span><span id=out>Мышь ушла с Блока</span>
 
<script type="text/javascript">
$("#LinkInserTium").mouseover(function(){
       var a=$(this).css("background-color")
       document.body.appendChild(document.createTextNode(a+'over|'));
    }).mouseout(function(){
       var a=$(this).css("background-color")
       document.body.appendChild(document.createTextNode(a+'out|'));
    });
</script>

</body>
</html>


Цвет не меняется при данных пертурбациях - так шо он флаг - если цвет тот жа что и при hover - из .mouseout - return false;

Последний раз редактировалось Deff, 06.08.2012 в 23:42.
Ответить с цитированием
  #29 (permalink)  
Старый 06.08.2012, 23:54
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

devote,
A а вообщем Ти прав .mouseleave/.mouseenter на JQ - работает и в ИЕ

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cообщения</title>
 
</head>
<body align=center>
 
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
 
<style type="text/css">
#LinkInserTium {
  text-align:center;
  margin:0 auto;
  height:100px;
  width:100px;
  border:1px red solid;
}
#LinkInserTium:hover {
  background-color:#0000CC;
}
 
#LinkInserTium a {
  padding:0 4px;
  background-color:#F7F7F7;
  border:1px red solid;
}
 
#hover {
  display:none;
 
}
</style>
 
<div id=LinkInserTium><br />
        <a href="/sdfsdf/">ПриветБ</a>
 
</div>
<span id=hover>Мышь в DIV</span><span id=out>Мышь ушла с Блока</span>
 
<script type="text/javascript">
$("#LinkInserTium").mouseenter(function(){
       var a=$(this).css("background-color")
       document.body.appendChild(document.createTextNode(a+'over|'));
    }).mouseleave(function(){
       var a=$(this).css("background-color")
       document.body.appendChild(document.createTextNode(a+'out|'));
    });
</script>

</body>
</html>
Ответить с цитированием
  #30 (permalink)  
Старый 07.08.2012, 00:59
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Deff,
ну теперь понял разницу в событиях? mouseover, mouseout работают совсем не так как mouseenter, mouseleave... И дело совсем не в ощутимости изменения цвета иль еще чего.. а втом что при сожании на mouseenter обработчика, я знаю что оно будет вызвано лишь раз для элемента, и не произайдет делегирования, то есть оно не будет срабатывать если я мышь держу в его приделах даже на дочерних элементах... что не скажешь о событии mouseover, которое будет срабатывать даже если я не уходил с элемента за его пределы, а всего лишь перешел на дочерний элемент, это и есть делегирование.. когда событие родителя срабатывает по цепи захвата/всплытия
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
onmouseout для ячейки таблицы. Sir_Hally Events/DOM/Window 2 24.01.2012 17:21
onmouseout with image Slawaq Events/DOM/Window 3 21.05.2011 01:03
Кто нибудь подскажет onmouseout при ul > li > ul, или все Великие kudenv Элементы интерфейса 2 12.03.2011 12:34
Проблемы с отработкой onmouseout micscr Events/DOM/Window 5 22.09.2009 18:19
вопрос такой:как поймать ивент до нажатия на линк!!? magavnuk Events/DOM/Window 3 13.07.2009 16:22