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

Question

我在输入字段中使用了两个事件 KEYPRESS AND 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. 当我按输入键时，应触发 myFunction 。不是onBlur。
2. 当我在输入字段外单击时，应调用 onBlur 函数。

问题：

按 ENTER 键时如何阻止 ONBLUR 事件。

您的建议将不胜感激

Answer 1

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

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

此代码确实应该使用 .addEventListener() 和 .removeEventListener() 模型。

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

＆＃13;

＆＃13;

// 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
  // becomming 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");
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;