Форум

Slawaq · #1 (**permalink**) 20.05.2011, 22:42

<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 · #2 (**permalink**) 21.05.2011, 00:03

Берешь элемент, на который перешел, и проверяешь, есть ли у него в родителях div. Если есть - ничего не делай. Выглядеть в твоем примере это может примерно так:

if( relatedTarget === this || relatedTarget.parentNode === this ) return;

Slawaq · #3 (**permalink**) 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 · #4 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript