onmouseout и линк
 

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

используйте события onmouseenter, onmouseleave

<div id="la" style="width: 100px; height: 100px; background: #f00;">
    <a href="">test</a>
</div>
<script>
    document.getElementById('la').onmouseenter = function() {
        this.style.backgroundColor = '#0f0';
    }
    document.getElementById('la').onmouseleave = function() {
        this.style.backgroundColor = '#f00';
    }
</script>

Читал уже про это http://www.xiper.net/manuals/html/ev...ouseenter.html

так что тут замкнутый круг.

читаю про такие жонглирования http://javascript.ru/tutorial/events...rigger:-target

ну в опере оно тоже работает... так что там на сайте не полная инфа, а в идеале нужно смотреть в других браузерах.

а вообще странно что оно не поддерживается другими браузерами кроме ИЕ и Оперы, хотя насчет ФФ ничего не скажу... нет возможности проветить.. Но в хроме точно не пашет.. Хотя в спецификации такие события есть http://www.w3.org/TR/DOM-Level-3-Eve...ype-mouseenter

нда уж, что называется осложнили жизнь

честно говоря я не ожидал того что в хроме не будет работать то что описано в документах. Вроде как хром хвалят за то что любит всякие экспериментальные штуки добавлять и то что в черновиках.. Уж не думал что банальное событие в хроме не будет работать.

ну а выход лишь один, для браузеров имеющих событие юзай его, а для других пиши костыль. Начало кода примерно такое:

// elem - это элемент на который хочешь повесить событие
if ( "onmouseenter" in elem ) {
    // тут код для тех кто его понимает
} else {
    // тут для тех кто не понимает пишешь костыль.
}

нет, лучше уже просто словить откуда событие пришло. вот пример кода (со страницы на которую я давал линк)

// Обработчик для mouseover
function mouseoverHandler(event) {
	event = event || window.event
	var relatedTarget = event.relatedTarget || event.fromElement
	// для mouseover
	// relatedTarget - элемент, с которого пришел курсор мыши
}

// Обработчик для mouseout
function mouseoutHandler(event) {
	event = event || window.event
	var relTarg = event.relatedTarget || event.toElement
	// для mouseout
	// relatedTarget - элемент, на который перешел курсор мыши
}

кстати подправить там надо, relTarg во второй функции (комментарий)

ну дык это и называется костыль

<div id="la" style="width: 100px; height: 100px; background: #f00;">
    <a href="">test</a>
</div>
<script>
    function onMouseEnter( elem, callback ) {
        if ( "onmouseenter" in elem ) {
            if ( elem.addEventListener ) {
                 elem.addEventListener( "mouseenter", callback, false );
            } else {
                 elem.attachEvent( "onmouseenter", callback );
            }
        } else if ( elem.addEventListener ) {
            elem.addEventListener( 'mouseover', function( event ) {

                var relTarg = event.relatedTarget;

                while( relTarg && relTarg !== elem && ( relTarg = relTarg.parentNode ) ) {}

                if ( relTarg !== elem ) {
                    callback && callback.call( this, event );
                }
            }, false );
        }
    }

    function onMouseLeave( elem, callback ) {
        if ( "onmouseleave" in elem ) {
            if ( elem.addEventListener ) {
                 elem.addEventListener( "mouseleave", callback, false );
            } else {
                 elem.attachEvent( "onmouseleave", callback );
            }
        } else if ( elem.addEventListener ) {
            elem.addEventListener( 'mouseout', function( event ) {

                var relTarg = event.relatedTarget;

                while( relTarg && relTarg !== elem && ( relTarg = relTarg.parentNode ) ) {}

                if ( relTarg !== elem ) {
                    callback && callback.call( this, event );
                }
            }, false );
        }
    }

    var elem = document.getElementById('la');
    onMouseEnter( elem, function() {
        document.body.appendChild(document.createTextNode('over|'));
    });
    onMouseLeave( elem, function() {
        document.body.appendChild(document.createTextNode('out|'));
    });
</script>