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

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>

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

Answer 1

alert()未激发的原因是，创建的div元素在click事件发生之前插入了blur事件。然后，当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？