Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.05.2011, 22:42
Аватар для Slawaq
Профессор
Отправить личное сообщение для Slawaq Посмотреть профиль Найти все сообщения от Slawaq
 
Регистрация: 19.05.2010
Сообщений: 187

onmouseout with image
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div onmouseover="this.style.background='red'" onmouseout="this.style.background='black';alert('1')"  style="width: 400px;height:100px;background: black;">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="336" height="76" />
</div>
</body>
</html>

наведите мышку на чёрный прямоугольник, а потом на картинку, при переходе вызовется событие "onmouseout" которое вызовет алерт, но при этом когда вводишь мышкой после этого по картинке, то "onmouseover" срабатывает, и фон красный, когда снова переходишь мышкой из картинки на прямоугольник то опять срабатывает событие оут, вот в чём вопрос, как убрать срабатывания события "onmouseout" при переходе с картинки на родительский элемент?
__________________
java.Uprise.*
Ответить с цитированием
  #2 (permalink)  
Старый 21.05.2011, 00:03
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Берешь элемент, на который перешел, и проверяешь, есть ли у него в родителях div. Если есть - ничего не делай. Выглядеть в твоем примере это может примерно так:
if( relatedTarget === this || relatedTarget.parentNode === this ) return;
Ответить с цитированием
  #3 (permalink)  
Старый 21.05.2011, 00:34
Аватар для Slawaq
Профессор
Отправить личное сообщение для Slawaq Посмотреть профиль Найти все сообщения от Slawaq
 
Регистрация: 19.05.2010
Сообщений: 187

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div onmouseover="this.style.background='red'" onmouseout="alert('1');this.style.background='black';"  style="width: 400px;height:100px;background: black;">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="336" height="76" onmouseover="if( relatedTarget === this || relatedTarget.parentNode === this ) return;"/>
</div>
</body>
</html>

так что-ли?
по другому спрошу, а как можно проверить ли принадлежит(находиться) мышь в дочернем элементе? типа в событии родителя написать условие, onmouseout="if(!mouseInChildren()) function()" , ну что то на подобии такого, возможно? или как можно хотя бы примерно реализовать "mouseInChildren()", дайте какой-то намёк ))
__________________
java.Uprise.*
Ответить с цитированием
  #4 (permalink)  
Старый 21.05.2011, 01:03
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от Slawaq
так что-ли?
Нет. Так:
<div id="test" style="width: 400px;height:100px;background: black;">
  <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="336" height="76" />
</div>
<script>
/*
Функцию mouseInChildren реализовать можно и нужно (см. ниже как),
потому что она универсальна.
Но в конкретном случае я проверяю только relatedTarget и его родителя,
потому что так быстрее:)
*/
function mouseInChildren(target, relatedTarget){
  while( relatedTarget ){
    if( relatedTarget === target ) return true;
    relatedTarget = relatedTarget.parentNode;
  };
  return false;
};

var div = document.getElementById("test");
div.onmouseover = function(){
  this.style.background = 'red';
};

div.onmouseout = function(event){
  event = event || window.event
  var relatedTarget = event.relatedTarget || event.toElement;
  //if( mouseInChildren(this, relatedTarget) ) return;
  if( relatedTarget === this || relatedTarget.parentNode === this) return;
  this.style.background='black';
};
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая смена картинок через заданное время herotic Элементы интерфейса 45 15.05.2020 16:44
onmouseout для ячейки таблицы. Sir_Hally Events/DOM/Window 2 24.01.2012 17:21
Кто нибудь подскажет onmouseout при ul > li > ul, или все Великие kudenv Элементы интерфейса 2 12.03.2011 12:34
Проблемы с отработкой onmouseout micscr Events/DOM/Window 5 22.09.2009 18:19
Проблема с write. (Opera) bomg Opera, Safari и др. 8 08.07.2009 09:59