我在使用jQuery事件时遇到了一个奇怪的问题,这是事情:
有一个表单需要验证,所以我们在窗体上为所有输入添加一个blur
事件监听器,当输入失去焦点时,监听器将验证用户输入是否有效,如果没有,错误消息将出现在输入下,从而推迟以后的HTML元素。我们还绑定click
事件以提交表单。
在输入区域中输入完成后,直接单击“提交”按钮。预期结果是:检查用户输入是否有效,如果是,则触发提交按钮的单击事件。实际结果是:将触发blur
输入事件,但只要用户输入有效,就不会触发click
事件。
我在jsfiddle中尝试过,发现在正常情况下,模糊事件和点击事件都将依次触发。但是这里发生的事情是:在blur
事件处理程序中,我们更改了页面布局,更改了提交按钮的位置,从而导致click
未触发。
这是jQuery的错误吗?有没有人遇到这个问题?任何帮助将不胜感激。
请参阅此处的示例:jsFiddle
答案 0 :(得分: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;
});
})