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

Question

1. 我有一个<input type=text>带focusout事件处理程序
2. 我有一个<button>click事件处理程序

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

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

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

单击从输入元素收集数据并使用Ajax发送它.

问题

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

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

题

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

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

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

示例代码我正在摆弄

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

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

Answer 1

你可以使用旗帜...

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

所以你的问题是：

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

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

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

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

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>