VPF::Замена onmouseover и onmouseout - Форум программистов

Itsys

Дата 1.12.2008, 20:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Добрый день,

Замучался отлавливать onmouseover/onmouseout на много влооженных структурах типа

Код


<div style="position: absolute; z-index: 2;">
    <div style="border: 2px solid #000; float:left; width: 1em; height: 1em;" onmouseover="show();" onmouseout="hide();"></div>
    <div style="margin-left:1em">
        <div id="SubCat_content" style="border: 2px solid #000;" onmouseover="show();" onmouseout="hide();">
            <div></div>
            <div></div>
            ...
            <div></div>
        </div>
    </div>
</div>

Написал небольшую библиотечку, которая обрабатывает onmousemove:
over_out.js

Код


mouseControls = new Array;
function mouseControl(over, out){
    this.over = over;
    this.out = out;
    this.coords = new Array;
    this.active = false;
    
    mouseControls.push (this);
    
    this.newCoord = function (newx1, newy1, newx2, newy2){
        this.coords.push({x1: newx1, y1: newy1, x2: newx2, y2: newy2});
    }
    this.newCoordObj = function (obj){
        var newx1 = 0;
        var newy1 = 0;
        var objcopy = obj;
        if (objcopy.offsetParent) {
            while (objcopy.offsetParent) {
                newx1 += objcopy.offsetLeft;
                newy1 += objcopy.offsetTop;
                objcopy = objcopy.offsetParent;
            }
        } else if (objcopy.x) {
            newx1 += objcopy.x;
            newy1 += objcopy.y;
        }
        this.coords.push({x1: newx1, y1: newy1, x2: (newx1 + obj.offsetWidth), y2: (newy1 + obj.offsetHeight)});
    }
    this.clearCoords = function (){
        this.coords = new Array;
    }
    this.attach = function (){
        this.active = true;
    }
    this.detach = function (){
        this.active = false;
    }
}
function mouseMoveControl(event){
    if (!event) event = window.event;
    for (i in mouseControls){
        if (mouseControls[i].active){
            var out = true;
            for (j in mouseControls[i].coords){
                if (event.clientX <= mouseControls[i].coords[j].x2 && event.clientX >= mouseControls[i].coords[j].x1 && event.clientY <= mouseControls[i].coords[j].y2 && event.clientY >= mouseControls[i].coords[j].y1){
                    out = false;
                }
            }
            if (!out){
                if (mouseControls[i].over){
                    mouseControls[i].over();
                }
            }
            else{
                if (mouseControls[i].out){
                    mouseControls[i].out();
                }
            }
        }
    }
}
if (document.body.addEventListener){
    document.body.addEventListener("mousemove", mouseMoveControl, false);
} 
else if (document.body.attachEvent){
    var r = document.body.attachEvent("onmousemove", mouseMoveControl);
}

Пример использования:

Код


<div id="Deb" style="position: absolute; border: 2px solid #000; background-color: #FFF; width:200px; height:200px"></div>
<div id="Deb2" style="position: absolute; border: 2px solid #000; left: 50%; background-color: #FFF"></div>
<script type="text/javascript" language="JavaScript">
    tcont = new mouseControl(function(){document.getElementById('Deb2').innerHTML = 'on'}, function(){document.getElementById('Deb2').innerHTML = 'of'});
    tcont.newCoord(400,400,500,500);
    tcont.newCoord(300,400,400,450);
    tcont.newCoordObj(document.getElementById('Deb'));
    tcont.attach();
</script>

Может чего я забыл учесть... что скажете?

Itsys

Дата 1.12.2008, 23:56 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Понял что надо еще учитывать скролл.. smile

Исправленный кусок:

Код


function mouseMoveControl(event){
    if (!event) event = window.event;
    var x = y = 0;
    if (document.attachEvent != null) { // Internet Explorer & Opera
        x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    } else if (!document.attachEvent && document.addEventListener) { // Gecko
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    }
    for (i in mouseControls){
        if (mouseControls[i].active){
            var out = true;
            for (j in mouseControls[i].coords){
                if (x <= mouseControls[i].coords[j].x2 && x >= mouseControls[i].coordsj].x1 && y <= mouseControls[i].coords[j].y2 && y >= mouseControls[i].coords[j].y1){
                    out = false;
                }
            }
            if (!out){
                if (mouseControls[i].over){
                    mouseControls[i].over();
                }
            }
            else{
                if (mouseControls[i].out){
                    mouseControls[i].out();
                }
            }
        }
    }
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »