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

时间:2014-04-22 08:28:21

标签: jquery

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

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

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

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

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

请参阅此处的示例:jsFiddle

1 个答案:

答案 0 :(得分:1)

当然这不是错误。 focusout之前正在触发click,因为click不是one-state事件。它有两种状态:mousedownmouseup。您应该在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