jQuery中的模糊函数多次调用，并在浏览器中使用自动完成密码

Question

我在jQuery中具有以下模糊功能，该功能在页面加载时会反复调用自身（在所有浏览器中）。

Chrome：版本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. 更改了#signInFormId输入[name = email]，＃formId输入[name = email]和输入ID（email_signup，signIn_email）。
6. 尝试使用e.preventDefault（）;
7. 删除了javascript：void（0）; 从形式动作。

在以下情况下，该问题无法重现。

禁用浏览器的自动完成功能或添加的自动完成功能=“ new-password”
（注意：autocomplete =” off”或false将被浏览器忽略）。

但是我不想为表单设置自动完成功能。

有人可以建议我停止通过自动完成功能触发多个模糊事件的方法吗？

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);
            }
        });
    } 
});