로그인폼 mouseleave 이벤트 이슈

이슈

로그인 폼의 ID 기록 (Input 박스 기록) 위에 마우스를 올리거나 클릭하면 로그인 폼이 사라지는 이슈가 발생했다.

원인

로그인폼에 mouseleave 이벤트가 발생하면 로그인폼이 사라지도록 설정되어 있는데, Input 기록 또한 로그인 폼 밖으로 인식하여 로그인 폼이 사라지는 것을 확인했다.

 

경과 및 해결

mouseleave 이벤트가 아닌 로그인 폼 밖을 클릭 했을 때, 로그인 폼이 사라지도록 변경하는 것을 목표로 했다.

 

기존 라이브러리 활용 시도

• Muse, Webpro 라는 Javascirpt 라이브러리를 사용. mouseout_both 라는 이벤트 파라미터를 사용하여 mouseleave 이벤트를 제어하는 것으로 확인. (그 외 mouseout_click, mouseout_trigger)
• 여기서 로그인 폼 밖을 클릭했을 때, 폼이 사라지도록 하는 이벤트 파라미터를 찾으려 했으나 없어서 실패

새로운 로직 구현

• 따라서 로그인 폼 외에 다른 아무곳이나 마우스 클릭을 실행하면 로그인 폼이 사라지도록 로직 구현 시작. (메인 페이지의 로그인 폼과 비슷하게 구현)
• 로그인 폼 영역의 div 태그 중 배경을 담당하는 div 태그가 하위의 Form 태그 및 다른 영역을 감싸지 않음 → 배경 div 태그가 Form 태그를 감싸도록 변경
• 배경 div 태그만을 이벤트 제어
• 로그인 폼 영역과 로그인 버튼 영역을 제외한 영역 클릭 시, 표시된 로그인 폼 사라지도록 로직 구현

 

   var logInFormToggle = false;
   
   $('#u29682-4').click(function(e){
       if (logInFormToggle) {
           $('#u29650').fadeOut();
           logInFormToggle = false; 
       } else {
           $('#u29650').fadeIn();
           logInFormToggle = true;
       }
   });
   
   $(document).mouseup(function(e){
       // mouseup 이벤트 예외 영역
       var bgContainer = $('#u29651'); //로그인 폼 배경
       var loginContainer = $('#u29680'); // 로그인 버튼 (따로 제어)

       if (!bgContainer.is(e.target) && bgContainer.has(e.target).length === 0 && 
           !loginContainer.is(e.target) && loginContainer.has(e.target).length === 0){
           
           $('#u29650').fadeOut();
           logInFormToggle = false; 
       }
   });