흐림 기능은 브라우저

Question

에서 나는 반복적으로 페이지로드 자체라고 jQuery를에 흐림 기능 다음 한에 자동 완성 암호를 반복적으로 여러 번 호출

크롬 (모든 브라우저에서합니다.) : 버전 63.0.3239.84
Firefox : 버전 57.0.2

다음은 jQuery 코드입니다.

$(document).on('blur','#signInFormId input[name=email],#formId input[name=email]',function(e){ 
     var formData  = {}; 
     formData.email = email; 
     $.ajax({ 
      method:'POST', 
      url: AJAX_URL, 
      dataType:'json', 
      data:formData, 
      success:function(response){ 
       console.log(response); 
      } 
     });  
}); 

다음과 같이 로그인 및 등록 양식을 모달로 사용하고 있습니다.
로그인 양식 :

<form id="signInFormId" > 
    <div class="email"> 
     <div class="header">Email Address</div> 
     <input type="email" name="signIn_email" id="signIn_email" placeholder="Email Address" value="" autofocus />  
    </div> 
    <div class="container"> 
     <div class="header">Password</div> 
     <input type="password" name="signIn_password" autocomplete="new-password" id="signIn_password" placeholder="Password" />   
    </div> 
</form> 

가입 양식 :

<form id="formId" action="javascript:void(0);"> 
    <div class="first-name"> 
     <div class="header">First Name</div> 
     <input type="text" id="first_name" name="first_name" placeholder="" value=""/> 

    </div> 
    <div class="last-name"> 
     <div class="header">Last Name</div> 
     <input type="text" id="last_name" name="last_name" placeholder="" value=""/>      
    </div> 
    <div class="container"> 
     <div class="header">Email Address</div> 
     <input type="email" id="email_signup" name="email" placeholder="" value=""/>   
    </div> 
    <div class="container"> 
     <div class="header">Password</div> 
     <input type="password" id="password" name="password" placeholder="password" value="" />       
    </div> 
    <a onclick="registerFunction()" href="javascript:void(0);"><div class="button">Signup</div></a> 

</form> 

다음은 내가 노력하고 문제가 재현되는 경우이다.

1. 로그인 양식에서 자동 포커스가 제거되었습니다.
2. 흐림 또는 초점 이벤트를 트리거 할 수있는 모든 기능을 선택했습니다 (없음).
3. 위의 흐림 기능을 제외한 모든 코드가 jQuery에서 제거되었으며 페이지에 두 양식 (로그인 및 가입)이 보관되었습니다.
4. 로그인 양식에서 autocomplete = "new-password"를 제거하고 등록 양식에 추가했습니다.
5. 입력 ID (email_signup, signIn_email)가 포함 된 #signInFormId input [name = email], # formId input [name = email]이 변경되었습니다.
6. e.preventDefault();를 사용하여 시도했습니다.
7. 제거 된 javascript : void (0); 양식 동작에서.

아래의 경우에는 문제가 재현되지 않습니다. 브라우저 또는 추가 자동 완성 = "새로운 비밀번호"
의

장애인 자동 완성 (참고 : 자동 완성 = "해제"또는 거짓 브라우저에 의해 무시 입니다).

그러나 양식에 자동 완성 기능을 사용하지 않으려합니다.

누구나 자동 완성 기능을 사용하여 여러 번 블러 이벤트가 발생하는 것을 막을 수있는 방법을 제안 할 수 있습니까?

Answer 1

여러 흐림을 방지하기 위해 부울을 추가 할 수 있습니다

는 * "반복적으로 자신을 소위"

var isBlur= false; 
$(document).on('blur','#signInFormId input[name=email],#formId input[name=email]',function(e){ 
    if(!isBlur){ 
     isBlur = true; 
     var formData  = {}; 
     formData.email = email; 
     $.ajax({ 
      method:'POST', 
      url: AJAX_URL, 
      dataType:'json', 
      data:formData, 
      success:function(response){ 
       console.log(response); 
      } 
     }); 
    } 
});