插入元素可防止触发单击事件

Question

我有一个简单的表单验证器。当您在输入之外单击时，它会显示一条错误消息（必要时）。

然而，我注意到了一个副作用。当错误消息插入表单时，它会将提交按钮向下移动，从而防止触发提交事件。

看看下面的片段。这个过于简化的例子模拟了这个问题。尝试单击输入，然后单击按钮。您会注意到按钮的单击事件不会触发，因为它向下移动。

function insert() {   
  var button = document.querySelector('button');
  document.body.insertBefore(document.createElement('div'), button);
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
}

<input onblur="insert()" />
<button onclick="alert()">Click</button>

我该如何解决这个问题？请记住，对于我的表单验证器，按钮的类型为提交，不会触发的事件是表单的提交事件，但显然可以在此处应用相同的概念。

Answer 1

alert() 未触发的原因是创建的 div 元素是在 click< 之前通过 blur 事件插入的/code> 事件发生。然后，当发生 click 事件时，它不会向按钮注册，因为按钮在页面上移动了。在下面的示例中，我添加了一个 delayInsert 函数来演示这一点。

步骤：

1. 单击输入字段
2. 单击 Click 按钮

alert() 将在插入 div 之前触发。

function delayInsert() {
  setTimeout(insert, 1000);
}

function insert() {
  var button = document.querySelector('button');
  document.body.insertBefore(document.createElement('div'), button);
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
}

<input onblur="delayInsert()" />
<button onclick="alert()">Click</button>

Answer 2

这对我有用。当我编辑 txt 框时，会附加 div。当我点击按钮时，它会发出警报。尝试使用js获取数据并向php发送xmlHTTPrequest？