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" при переходе с картинки на родительский элемент? |
Берешь элемент, на который перешел, и проверяешь, есть ли у него в родителях div. Если есть - ничего не делай. Выглядеть в твоем примере это может примерно так:
if( relatedTarget === this || relatedTarget.parentNode === this ) return; |
<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()", дайте какой-то намёк )) |
Цитата:
<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, время: 01:00. |