【问题标题】：how to prevent ONBLUR event when keypress or enter?按键或输入时如何防止ONBLUR事件？
【发布时间】：2017-02-02 17:24:16
【问题描述】：

我在输入字段中使用了两个事件 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 事件，但我一次只需要触发一个事件。

例如：

当我按下 enter 键时，应该会触发 myFunction。不是 onBlur。
当我在输入框外点击时，onBlur 函数应该会被调用。

问题：

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

您的建议将不胜感激

【问题讨论】：

只需重置属性：onblur = ""
查看我的更新答案以获取以更现代、更简洁的方式编写代码的解决方案和提示。
@ScottMarcus 谢谢
别忘了给我的答案投票，并将其标记为“the”答案。

标签： javascript html

【解决方案1】：

您可以通过onblur = "" 重置该属性以不再持有对先前存储的回调函数的引用。

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

但是，您确实不应该使用 HTML 属性设置事件处理程序，因为它们会创建意大利面条式代码，这会导致围绕您的处理程序函数创建全局包装函数，这些函数会更改 this 绑定并且不遵循 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>

【讨论】：