按键或进入时如何防止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");
}

小提琴

注意：

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

例如：

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

题：

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

您的建议将不胜感激

Answer 1

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

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

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

这段代码确实应该使用.addEventListener()and.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>