在一种方法中进行 ajax 调用时，不会按顺序触发单击和更改事件

Question

我在表单中有输入字段和提交按钮。每个输入字段都有onchange事件处理函数，按钮有onclick事件处理函数。

这是供参考的示例虚拟表格。

<style>
    div {
        margin: 15px;
    }
</style>
<script>
    function inputchange() {
        alert("Input change triggered");
    }

    function buttonclick() {
        alert("Button click triggered");
    }
</script>

<div>
    <input type="button" value="submit" onclick="buttonclick()" />
</div>

<div>
    <input type="text" onchange="inputchange()" id="input1" placeholder="Input 1" />
    <input type="text" onchange="inputchange()" id="input2" placeholder="Input 2" />
    <input type="text" onchange="inputchange()" id="input3" placeholder="Input 3" />
</div>

https://jsfiddle.net/navinchinnasamy/z3vq2n65/12/

当输入值发生变化时，光标仍然在该输入中并且单击按钮意味着onchange 和onclick 事件都被触发了。

如果在 inputchange() 方法中进行了 ajax 调用，则不会调用 buttonclick() 方法。 Ajax 成功不会影响按钮，只会修改和更新输入字段的值。

Answer 1

尝试将 change 事件处理程序中的警报更改为 console.log 或将两个警报包装在 setTimeout 中。

const
bind = (el, t, l) => el.addEventListener (t, l, true),
change = ev => setTimeout (
  () => alert (`${ev.target.name}.${ev.type} ${ev.target.value}`),
  200
),
click = ev => setTimeout (
  () => alert (`${ev.target.name} ${ev.type} ${form1.text1.value}`),
  200
)

bind (form1.button1, 'click', click)
bind (form1.text1, 'change', change)

<form name="form1">
    <input name="text1" />
    <input name="button1" type="button" value="Submit" />
</form>

click 事件将在 mousedown、focus 和 mouseup 事件在同一对象上触发之后触发。

当您更改 text1 的值并单击 button1 时，事件按以下顺序发生：

1. button1.mousedown,
2. button1.焦点,
3. input1.模糊
4. input1.更改
5. button1.mouseup
6. button1.点击

请注意，在 mouseup 事件发生之前 button1 必须处于焦点。但是，当您在 change 事件处理程序中调用 alert 时，button1 失去焦点并且不会触发 mouseup 事件，因此 button1 上的 click 事件也不会触发.