Как имитировать .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: |
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); }); |
Спасибо большое :)
|
Часовой пояс GMT +3, время: 22:33. |