Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   onmouseout with image (https://javascript.ru/forum/events/17483-onmouseout-image.html)

Slawaq 20.05.2011 22:42

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" при переходе с картинки на родительский элемент?

Sweet 21.05.2011 00:03

Берешь элемент, на который перешел, и проверяешь, есть ли у него в родителях div. Если есть - ничего не делай. Выглядеть в твоем примере это может примерно так:
if( relatedTarget === this || relatedTarget.parentNode === this ) return;

Slawaq 21.05.2011 00:34

<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()", дайте какой-то намёк ))

Sweet 21.05.2011 01:03

Цитата:

Сообщение от 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>


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