javascript - 触发焦点事件将触发模糊事件(不使用警报和浏览器控制台)

Question

jsfiddle link

<input id = "focus-ipt" type = "text" value = "nothing" />

var $focusIpt = document.querySelector( "#focus-ipt" );
$focusIpt.addEventListener( "blur", function ( e ) {
   $focusIpt.value = "blured!";
} );
setTimeout( function () {
    $focusIpt.focus();
    }, 1000 );

我只是触发焦点事件，但焦点后触发模糊事件； 我找了好久，关闭控制台，使用setTimeout，但是都无法解决；我真的不知道这是怎么发生的，谁能帮帮我吗？

Answer 1

事实并非如此； <强> focus() 不会自动触发 blur() 。

由于您正在与 DOM 交互，所以 blur() 被触发。通过单击 fiddle 中的按钮之一(例如 Run 或 Tidy)，#focus-ipt 元素不再处于事件状态 - - 您点击的按钮是。

如果您只是等待超时，而不执行任何操作，则 blur() 事件不会发生。一旦您点击输入，blur()就会发生。

这可以在以下示例中看到:

var $focusIpt = document.querySelector("#focus-ipt");
$focusIpt.addEventListener("blur", function(e) {
  $focusIpt.value = "Blurred!";
});
setTimeout(function() {
  $focusIpt.focus();
}, 1000);

<input id="focus-ipt" type="text" id="myText" value="Sample Text">
<button type="button">Click me to lose focus</button>

希望这有帮助! :)