Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2009, 22:24
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

mouseout: неправильный relatedTarget
сократил страничку до следующих размеров:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <script type="text/javascript">


var services = {


    init: function() {
    
        var cats = document.getElementsByTagName('h2');
        for( var i=0; i<cats.length; i++ ) {
            cats[i].onmouseover = services.category_overOut;
            cats[i].onmouseout = services.category_overOut;
        }
    },


    category_overOut: function( e ) {
    
        var e = e || window.event,
            tooltip = document.getElementById('tooltip'),
            relatedTarget = e.relatedTarget || e.toElement;
        if( tooltip.style.display == 'block' ) {
            if( services._shouldHide( relatedTarget ) )
                tooltip.style.display = 'none';
        } else {
            rememberCur( this ); // если закомментировать
             // то работает нормально
            tooltip.style.left = '0px';
            tooltip.style.display = 'block';
            tooltip.style.top = (this.offsetTop-$('tooltip').offsetHeight) + 'px';
        }


        function rememberCur( e ) {
        
            services.h2 =   e.tagName == 'H2'   ? e   : prv(e);
            services.ul =   e.tagName == 'UL'   ? e   : nxt(e);
        }
    },


    _shouldHide: function( relatedTarget ) {
    
        var tooltip = document.getElementById('tooltip');
        return (tooltip != relatedTarget) &&
            ! isParent(tooltip, relatedTarget) &&
            (services.h2 != relatedTarget) &&
            (services.ul != relatedTarget) &&
            ! isParent(services.ul, relatedTarget);
    }
};


function isParent( parent, el ) {

    while( el ) {
        if( el.parentNode == parent )
            return true;
        el = el.parentNode;
    }
    return false;
}


function nxt( n ) {

    do {
        n = n.nextSibling;
    } while( n && n.nodeType != 1 )
    return n;
}


function prv( n ) {

    do {
        n = n.previousSibling;
    } while( n && n.nodeType != 1 )
    return n;
}


function $( id ) {
    
    return   typeof id == 'string'   ? document.getElementById(id)   : id;
}


window.onload = services.init;

    </script>
</head>
<body>
        <ul><li style="line-height: 1.2;">Campaign Development
            <li style="line-height: 1.2;">Mailing List Aquisition
            <li style="line-height: 1.2;">Demographics
            <li style="line-height: 1.2;">Bulk Rate Savings
            <li style="line-height: 1.2;">Post Office Delivery
            <li style="line-height: 1.2;">Database Services
            <li style="line-height: 1.2;">Complete Production</ul>
        
        <h2 style="cursor: pointer;">Political</h2>
    
    <div id="tooltip" class="tooltip" style="
        position: absolute;
        display: none;
        width: 450px;
        background: red;
    ">By large color we mean large sizes, something you cannot print on a regular printing press. We can print on different kinds of media, matte paper, glossy paper, vinyl and even canvas (fabric) for whichever application you need. From a poster mounted on foam board, a simple banner with grommets or a POP display to more complex Trade Show booths or large window graphics for retail.</div>
</body>
</html>

при наведении на "Political" появляется всплывающая подсказка. При наведении на нее мыши, она не должна скрываться. Я не скрываю подсказку, если происходит mouseout c "Political" на подсказку. Но прикол в том, что в очень определенных условиях mouseout происходит на body, не на подсказку (и она исчезает). Чтобы воспроизвести ситуацию, нужно навести курсор на "Political", а потом медленно вести его вверх. При этом не получится перевести курсор на подсказку (как минимум ff3)

При чем важно количество пунктов списка (не при всех количествах пунктов ситуация воспроизводится) и то, что у них стоит line-height: 1.2. Еще важно, чтобы была вызвана функция rememberCur (хотя каким боком она влияет, я хз). Позже продолжу разбираться. Может это только у меня оно так глючит O_o
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover, mouseout - не распространяется на дочерние элементы barmaley Events/DOM/Window 31 01.06.2017 09:52
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05