JS onmouseout

pytanie zadane 16 września 2017 w JavaScript przez Dymitr Nowicjusz (120 p.)
edycja 16 września 2017 przez Dymitr

Cześć, piszę interaktywny kalendarz, każda data to osobny div, który buduję za pomocą dwóch pętli:

    for(r=0;r<5;r++){
        code=code+" <div class=\"row\">";
        for(it=0;it<7;it++){
            gray=checkDate(d);
            code=code+"<div class=\"block "+gray+"\" onclick=\"buldBigBlock(this)\">"+d.getDate()+"</div>";
            d.setDate(d.getDate()+1);
        }
        code=code+"</div>";
        if(r<4)
            code=code+"<hr>";
    }
    document.getElementById("dates").innerHTML=code;

w wierszu nr 5 wywołuję metodę buldBigBlock(x) do której przekazuję bieżący div. I tutaj zaczyna się problem: dana metoda powinna zapisać do pola zawartość przekazanego diva i później podmienić ją w przekazanym divie:

function buldBigBlock(x){
    _oldValue=x.innerHTML;
    var code="<div class=\"activated\" onmouseout=\"buildSmallBlock(x)\"></div>"
    x.innerHTML=code;

}

function buildSmallBlock(x){
    x.innerHTML=_oldValue;
}

Nowy div który zostaje utworzony przez metodę buldBigBlock(x) ma w sobie właściwość onmouseout, która wywołuje metodę buildSmallBlock(x), do której przekazuję podstawowy div, żeby znowu podmienić go zawartość (właściwie to przywrócić poprzednią, ściągając ją z pola).

W praktyce po kliknięciu na jakiś dzień większy div się pojawia, ale nie znika po zjechaniu z niego. Będę wdzięczny za wyjaśnienie mojego błędu!

komentarz 17 września 2017 przez mitelak Pasjonat (23,330 p.)

Strzelam, że jak w wielu poprzednich pytaniach coś nie tak z onmouseout liniowym i po zastąpieniu go EventListenerem wszystko by działało :)

1 odpowiedź

odpowiedź 1 października 2017 przez shotokan Nałogowiec (39,660 p.)

A jak ma znikać, jak używasz funkcji onclick, a potem onmouseout. W sumie to do jednego obiektu używasz obsługi dwóch zdarzeń za pomocą klasycznego podejścia, a tak się nie da, tzn. nie zostaną one obsłużone, tylko jedno z nich.
Jak już coś to użyj funkcji addEventListener, lub zamiast onlick użyj onmouseover.

komentarz 1 października 2017 przez Dymitr Nowicjusz (120 p.)

Rozwiązałem problem za pomocą jquery:

function buldBigBlock(x){
    _oldValue=x.innerHTML;
    var code = "<div class=\"activated\">"+buildDetails($(x).attr('id'))+"</div>";
    x.innerHTML=code;
    $(".activated").click(false);
    $(".activated").on({
        'mouseleave':function() {x.innerHTML=_oldValue;}
    })
}