6
  1. 我有一个<input type=text>withfocusout事件处理程序
  2. 我有一个<button>点击事件处理程序

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

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

因为我无法重新关注focusout事件处理程序。focusout活动也不能取消。仅供参考。

Click从输入元素收集数据并使用 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 和其他浏览器进行测试，看看有什么不同。

4

2 回答 2

4

可以用flag...

现场演示：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>
于 2011-01-07T19:15:59.520 回答
0

.focusout您使用而不是有理由.blur吗？

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

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

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

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

2) 在未通过验证时将以下内容添加到 focusout 事件：

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

你可以在这里找到一个例子。

于 2011-01-07T19:32:10.350 回答