javascript - 删除后重新添加 onblur 属性

Question

我有一个使用 onblur 的文本框和 ondblclick - 当他们双击时会打开一个弹出屏幕，但我不想触发 onblur。

当调用双击函数时，我删除了 onblur 属性以阻止它被触发。这行得通，但现在我试图在弹出窗口打开后重新添加 onblur，但它不起作用

function OpenCust(v) {
             $('#<%= txtDebtor.ClientID %>').removeAttr('onblur');
             shadowboxopen = true;
             if (!v || 0 === v.length) {

             }
             else {
                 Shadowbox.open({
                     content: "lookups/Customer.aspx?NODEBT=true&CustomerAC=" + v,
                     player: "iframe",
                     onClose: function () { shadowboxopen = false; },
                     title: "Edit Customer"
                 });
             }
             $('#<%= txtDebtor.ClientID %>').attr('onblur');
        }

编辑:更改了代码以打开和关闭模糊功能，但在调用双击 OpenCust 时仍然会触发 onblur。

文本框:<asp:TextBox runat="server" ID="txtDebtor" onblur="CheckIfAccountCodeDebtValid(this.value)" ondblclick="OpenCust(this.value)"></asp:TextBox>

function OpenCust(v) {
         $('#<%= txtDebtor.ClientID %>').off('blur', CheckIfAccountCodeDebtValid(v));
         shadowboxopen = true;
         if (!v || 0 === v.length) {

         }
         else {
             Shadowbox.open({
                 content: "lookups/Customer.aspx?NODEBT=true&CustomerAC=" + v,
                 player: "iframe",
                 onClose: function () { shadowboxopen = false; },
                 title: "Edit Customer"
             });
         }
         setTimeout(function() {
             $('#<%= txtDebtor.ClientID %>').on('blur', CheckIfAccountCodeDebtValid(v));
         }, 2000);

    }

Answer 1

您必须在重新添加时指定 onblur 的值。 jQuery 中执行此操作的正确函数是 on() 和 off()。在下面的示例中，您可以看到我如何在单击按钮后删除模糊事件处理程序，但在 2 秒后再次添加它。如果按钮在这 2 秒内失去焦点，则不会出现模糊的控制台消息。如果它在聚焦之后失去焦点。

//Add blur event handler to the button
$('#button').on('blur', blurFunction);

//Add click event handler to the button
$('#button').on('click', function() {
  //Remove blur event handler
  $('#button').off('blur', blurFunction);
  console.log('click');
  setTimeout(function() {
    //reattach blur event handler after 2 seconds
    $('#button').on('blur', blurFunction);
  }, 2000);
});

//The actual blur event handler function
function blurFunction() {
  console.log(this.value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="button" value="test-value">

对于使用参数的函数，您可以将其包装在匿名函数中，如下面的代码片段所示。

//Add blur event handler to the button
$('#button').on('blur', function() {
  CheckIfAccountCodeDebtValid(this.value);
});

//Add click event handler to the button
$('#button').on('click', function() {
  //Remove all blur event handlers
  $('#button').off('blur');
  console.log('click');
  setTimeout(function() {
    //reattach blur event handler after 2 seconds
    $('#button').on('blur', function() {
      CheckIfAccountCodeDebtValid(this.value);
    });
  }, 2000);
});

//The actual blur event handler function
function CheckIfAccountCodeDebtValid(value) {
  console.log(value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="button" value="test-value">