javascript - 按键或输入时如何防止ONBLUR事件？

Question

我在我的输入字段中使用了两个事件 KEYPRESS 和 ONBLUR，当按下 ENTER 键时，它会触发 KEYPRESS 和 ONBLUR也是。

代码:

<div id="text">
 <input type="text" onblur="onBlur()" onkeypress="myFunction(event)">
</div>
 
 window.myFunction = function(e) {
 if (e.which == 13) {
 document.getElementById("text").innerHTML = "text";
   console.log("keypress");
 }
}

window.onBlur = function() {
  console.log("blur");
}

fiddle

注意事项:

我需要处理按键以及 onblur 事件，但我只需要一次触发一个事件。

例如:

1. 当我按下enter 键时，应该触发myFunction。不是 onBlur。
2. 当我在输入字段外单击时，应该调用 onBlur 函数。

问题:

如何在按下ENTER 键时防止ONBLUR 事件。

您的建议将不胜感激

Answer 1

您可以使用 onblur = "" 重置该属性以不再保留对先前存储的回调函数的引用。

此外，不要将函数设置为 window 的属性，这会使它们成为全局函数。而只是在您希望它们可访问的范围内声明它们。

但是，您真的不应该使用 HTML 属性设置事件处理程序，因为它们会创建意大利面条代码，导致围绕您的处理程序函数创建全局包装函数，这些函数会改变 this 绑定(bind)并且不遵循W3C DOM 事件标准。

这段代码真的应该使用 .addEventListener() 和 .removeEventListener() 模型:

// Wait until the DOM is loaded
window.addEventListener("DOMContentLoaded", function(){

  // Get DOM reference to the input element in question
  var input = document.getElementById("myInput");

  // Attach callbacks to element for various events
  input.addEventListener("blur", doBlur);
  input.addEventListener("keypress", doKeypress);

  // By declaring your functions inside a larger function, they avoid
  // become global functions and have the appropriate scope.
  function doKeypress(e) {
   // Check for ENTER key
   if (e.keyCode === 13) {
     // Remove blur event handler
     input.removeEventListener("blur", doBlur);
   
     // Do actions
     document.getElementById("text").innerHTML = "text";   
   }
  }

  function doBlur() {
    console.log("blur");
  }
});

<div id="text">
 <input type="text" id="myInput">
</div>