Question

我在使用jQuery事件时遇到了一个奇怪的问题，这是事情：

有一个表单需要验证，所以我们在窗体上为所有输入添加一个blur事件监听器，当输入失去焦点时，监听器将验证用户输入是否有效，如果没有，错误消息将出现在输入下，从而推迟以后的HTML元素。我们还绑定click事件以提交表单。

在输入区域中输入完成后，直接单击“提交”按钮。预期结果是：检查用户输入是否有效，如果是，则触发提交按钮的单击事件。实际结果是：将触发blur输入事件，但只要用户输入有效，就不会触发click事件。

我在jsfiddle中尝试过，发现在正常情况下，模糊事件和点击事件都将依次触发。但是这里发生的事情是：在blur事件处理程序中，我们更改了页面布局，更改了提交按钮的位置，从而导致click未触发。

这是jQuery的错误吗？有没有人遇到这个问题？任何帮助将不胜感激。

请参阅此处的示例：jsFiddle

Answer 1

当然这不是错误。 focusout之前正在触发click，因为click不是one-state事件。它有两种状态：mousedown和mouseup。您应该在form中完成此类布局，但如果您真的想这样做，可以使用mousedown进行额外检查，例如

var mouse_down = false;
$(function(){
  $('#in').on('focusout',function(e){
    console.log('focus event: %o',e);
    if (mouse_down) {
        mouse_down = false;
        $('#button').click();
    }
    $('#test').css({'margin-bottom':'100px'});
  });
  $('#button').on('click',function(e){
    console.log('click event: %o',e);
  });
  $('#button').on('mousedown',function(e){
    mouse_down = true;
  });
  $(document).on('mouseup',function(e){
    mouse_down = false;
  });
})

UPDATED FIDDLE

当目标位置发生变化时，jQuery事件无法触发

1 个答案: