我正在尝试确定用于微调数据输入Web应用程序的工作流。在单个网页上画出几种地址形式:
1. Name___________
Street_________
Phone__________
2. Name___________
Street_________
Phone__________
[...many more...]
现在,我想知道用户是否使用Tab键转到第二个“名称”字段(或该记录中的任何地方),或者他们是否使用鼠标单击它。 (或按Shift键以向后移动。)
我已经在焦点和单击上为输入字段设置了一个处理程序:
$('input').click(function() { TabulateClick(this) });
$('input').focus(function() { TabulateFocus(this) });
然后在处理程序中,确定用户正在使用的地址以及是否“切换”了地址记录。 (如果焦点位于第一个地址的“电话”中,然后单击同一地址中的“名称”字段,则实际上并没有切换记录,因此我不将其制成表格。)
function TabulateClick(field)
{
var currentAddressRecord = FindAddress(field);
if ( lastAddressRecord != currentAddressRecord )
switchedAddressesWithClick++;
lastAddressRecord = currentAddress;
}
function TabulateFocus(field)
{
var currentAddress = FindAddress(field);
if ( lastAddressRecord != currentAddressRecord )
switchedAddressesWithTab++;
lastAddressRecord = currentAddress;
}
我的问题是,当我在字段中单击鼠标时,首先触发
focus
事件,以制表一个错误的switchedAddressesWithTab
并更改currentAddress(即错误)。当click
处理程序运行时,lastAddressRecord
被破坏了。focus
处理程序内部是否有办法知道同一对象上有一个待处理的click
事件?还是在click
处理程序中知道它以前是由focus
处理的? 最佳答案
我认为这是基于以下事实进行的:鼠标按下发生在焦点之前。参见demo。
var lastClick = null;
$('input').mousedown(function(e) {
lastClick = e.target;
}).focus(function(e){
if (e.target == lastClick) {
console.log('click');
} else {
console.log('tab');
}
lastClick = null;
});
为了修复Josiah发现的错误,我将代码更改为以下代码。参见demo。
var lastFocusedElement = null;
var isClick = false;
$('input').mousedown(function(e) {
isClick= true;
}).focus(function(e){
// To prevent focus firing when element already had focus
if (lastFocusedElement != e.target) {
if (isClick) {
console.log('click ----');
} else {
console.log('tab -----');
}
lastFocusedElement = e.target;
isClick = false;
}
});
$(document.body).focus(function(){
lastFocusedElement = document.body;
});
一个问题是,当您离开窗口并重新切换时,您不会获得“单击”或标签。您会在具有焦点的输入上获得焦点事件,但是由于它们都不是选项卡或单击,因此无法确定它是选项卡还是单击。
我认为这是您获得的最接近的结果,我将在您的页面上尝试一下,看看行为是否足够好。