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

在下面的情况下，该问题不可重现。

已禁用浏览器自动填充或已添加autocomplete =“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);
            }
        });
    } 
});