Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как имитировать .one из jQuery на чистом JS (https://javascript.ru/forum/events/62297-kak-imitirovat-one-iz-jquery-na-chistom-js.html)

lakusha 03.04.2016 19:32

Как имитировать .one из jQuery на чистом JS
 
Есть вот такая функция:
$('.loginIcon').one('click', function(){
    $('.loginIcon').css({
        'width' : '100%',
        'height' : '100%',
        'left' : '0px',
        'margin-left' : '0px',
        'bottom' : '0px'
    });                                                            
    $('.buttonForSydorenko').css({
        'display' : 'block'
    }); 
    $('#inputLogin').css({
        'display' : 'block'
    }); 
    $('.wordLogin').css({
        'display' : 'block'
    }); 
    $('.buttonForLogin').css({
        'display' : 'block'
    }); 
    $('#inputLogin').delay(500).animate({height: '80px'},100);      
    $('.wordLogin').delay(500).animate({'margin-left': '-240px'})   
    $(this).css({
        'background' : 'rgb(73,38,105)',
        'padding-top' : '40px'
    });                                                             
});

Вот переписал внутренности на чистый JS:
loginIcon.addEventListener('click', function(){
    loginIcon.style.width = "100%";
    loginIcon.style.height = "100%";
    loginIcon.style.left = "0px";
    loginIcon.style.marginLeft = "0px";
    loginIcon.style.bottom = "0px";  
    loginIcon.style.background = "rgb(73,38,105)";                                                       

    buttonForSydorenko.style.display = "block";
    inputLogin.style.display = "block";
    wordLogin.style.display = "block";
    buttonForLogin.style.display = "block";
    setTimeout( function(){
    inputLogin.style.height = "80px";  
       },500);      
    wordLogin.classList.add("wordLoginAnim");   
    loginIcon.style.background = "rgb(73,38,105)";  
    loginIcon.style.paddingTop = "40px";
    alert('OPA');
});


Добавил во втором варианте алерт "Опа".
Цель: чтобы этот алерт вылетел только по первому клику, а следующие клики по этому элементу ничего не делали бы. В jQuery мне помог .one, тут не могу придумать, туплю.
:help: :help: :help:

рони 03.04.2016 19:48

lakusha,
:-?
loginIcon.addEventListener('click', function x(){
    loginIcon.style.width = "100%";
    loginIcon.style.height = "100%";
    loginIcon.style.left = "0px";
    loginIcon.style.marginLeft = "0px";
    loginIcon.style.bottom = "0px";
    loginIcon.style.background = "rgb(73,38,105)";

    buttonForSydorenko.style.display = "block";
    inputLogin.style.display = "block";
    wordLogin.style.display = "block";
    buttonForLogin.style.display = "block";
    setTimeout( function(){
    inputLogin.style.height = "80px";
       },500);
    wordLogin.classList.add("wordLoginAnim");
    loginIcon.style.background = "rgb(73,38,105)";
    loginIcon.style.paddingTop = "40px";
    alert('OPA'); loginIcon.removeEventListener('click', x);
});

lakusha 03.04.2016 19:55

Спасибо большое :)


Часовой пояс GMT +3, время: 22:33.