我正在尝试确定用于微调数据输入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;
});

一个问题是,当您离开窗口并重新切换时,您不会获得“单击”或标签。您会在具有焦点的输入上获得焦点事件,但是由于它们都不是选项卡或单击,因此无法确定它是选项卡还是单击。

我认为这是您获得的最接近的结果,我将在您的页面上尝试一下,看看行为是否足够好。

10-05 20:34
查看更多