e.preventDefault() 不能按预期使用 TAB 键和“onchange”事件

Question

在输入字段上我有一个“更改”事件，这个事件发送一个ajax请求，如果返回错误，这个错误被注入到页面顶部的html中。 但是，如果我按下“TAB”键，光标会自动聚焦到下一个输入字段，就像在“更改”事件之前发送 TAB 事件一样，屏幕不会在出现错误消息时滚动到页面顶部。

有什么办法可以解决吗？还是我以错误的方式使用“更改”，也许最好改用“keydown”？

function myLogicFunction() {
    console.log('execute ajax call with some logic');
}

$('#name').change(function(e){
    myLogicFunction()
});

$('#name').keydown(function(e){
  if(e.key === 'Tab') {
    e.preventDefault();
    $(this).trigger('change');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Name: <input type="text" id="name" />
<br>
Bio: <textarea cols="60" rows="5" id="bio"></textarea>

我这样做了，处理了“TAB”键，但现在的问题是：当我点击页面的任何地方时运行这个监听器后，“onchange”事件被调度。我认为这是正常行为，因为字段值发生了变化。但是我如何防止这种行为呢？我的函数“myLogicFunction”已经被调用了，那样会被再次调用。

Answer 1

可以使用blur事件，也可以尝试移除change()事件。 我还建议将逻辑保留在 myLogicFunction() 中，这样每个事件都会调用它，而不是进行链接调用

function myLogicFunction() {
    console.log('execute ajax call with some logic');
}
/*
$('#name').change(function(e){
    myLogicFunction()
});
*/
$('#name').blur (function(e){
    myLogicFunction()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Name: <input type="text" id="name" />
<br>
Bio: <textarea cols="60" rows="5" id="bio"></textarea>