Question

我有<input type=text> focusout事件处理程序
我有一个<button>点击事件处理程序

Focusout 检查输入框中的格式是否正确。它通过针对正则表达式测试输入值来实现。如果失败，它会显示一条消息（一段时间后div淡入和退出）并通过调用重新调整我的输入

window.setTimout(function() { $(this).focus(); }, 10);

因为我无法重新聚焦focusout事件处理程序。 focusout事件也无法取消。仅供参考。

点击从输入元素中收集数据并使用Ajax发送。

问题

当用户 TABs 通过表单时，一切都很好。当某个输入框失败格式化检查时，它会在用户按 TAB 后立即重新聚焦。

但是当用户不使用 TAB 而是点击每个单独的输入字段时，一切正常，直到他们点击button。 focusout触发并设置重新聚焦的超时时间。由于超时是如此之短，之后会发生聚焦，然后click事件触发并发出Ajax请求。

问题

我已将格式化检查作为一个独立的jQuery插件实现，我希望保持这种状态。它使用.live()在具有特定属性的所有输入字段上附加focusout，其中定义了格式正则表达式。

数据提交也是通用的，我不想让它依赖于格式化插件。他们应该保持独立。

如何在不使这两个插件依赖的情况下阻止点击事件执行？

示例代码我正在摆弄

经过一番搜索后，我发现所有主要的浏览器支持document.activeElement，但我无法在Chrome中运行。 FF和IE都报告this是活动元素，但Chrome总是说它BODY即使在click元素上button被激活也是有效的。

检查此代码http://jsfiddle.net/Anp4b/1/并单击按钮。使用Chrome和其他浏览器进行测试，看看其中的差异。

Answer 1

你可以使用旗帜......

现场演示： http://jsfiddle.net/Anp4b/4/

所以你的问题是：

如何在不使这两个插件依赖的情况下阻止执行click事件？

好吧，你显然无法阻止点击事件。如果用户想要单击该按钮，他将会触发点击事件。你无能为力。

所以上述问题的答案是：你不能。

根据当前条件，您必须 - 在单击处理程序内部 - 检索验证结果，并根据该结果确定是否应该发生表单提交。

JS代码：

$("#Name").focusout(function(){    
    var that = this;    
    valid = this.value.length ? true : false;    
    !valid && window.setTimeout(function() {
        $(that).focus();
    }, 0);            
});


$("#Confirm").click(function(e) {    
    if ( !valid ) { return false; }    
    e.preventDefault();    
    alert('AJAX-TIME :)');    
 });

HTML代码：

<input type="text" id="Name">
<button id="Confirm">OK</button>

Answer 2

您是否有理由使用.focusout代替.blur？

使用标志是个好主意，但我宁愿在元素上使用类。通过使用类来确定状态，您还可以相应地设置样式。这是my example基于你的小提琴。

另一种希望能够提供您正在寻找的结果的解决方案。

1）创建一个命名的点击处理程序：

var clickHandler = function(e){ /** submit form or whatever you want to do**/ };
$("button").click(clickHandler);

2）在验证失败时将以下内容添加到焦点事件中：

$("button").unbind("click", clickHandler).one("click", function(){ button.click(clickHandler); return false;});

您可以找到此here的示例。

单击在不同输入上启动焦点事件的DOM问题

问题

问题

示例代码我正在摆弄

2 个答案: