jQuery处理焦点并单击元素

Cli*_*rce 12 javascript mouse jquery events focus

我正在尝试确定微调数据输入Web应用程序的工作流程.在单个网页上显示几个地址表单:

  1. Name___________
     Street_________
     Phone__________

  2. Name___________
     Street_________
     Phone__________

  [...many more...]
Run Code Online (Sandbox Code Playgroud)

现在我想知道用户是否正在使用tab键进入第二个"Name"字段(或该记录中的任何位置),或者他们是否使用鼠标点击它.(或移位标签反向移动.)

我在焦点和点击上为输入字段设置了一个处理程序:

$('input').click(function() { TabulateClick(this) });
$('input').focus(function() { TabulateFocus(this) });
Run Code Online (Sandbox Code Playgroud)

在处理程序中,我确定用户正在处理哪个地址以及我们是否"切换"了地址记录.(如果焦点位于第一个地址的"电话"中,并且您单击同一地址中的"名称"字段,那么实际上并未切换记录,因此我不会将其列表.)

    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;
    }
Run Code Online (Sandbox Code Playgroud)

我的问题是当我鼠标点击进入该字段时,focus事件将首先触发一个false switchedAddressesWithTab并更改currentAddress(这是坏的).当click处理器运行时,lastAddressRecord是被宠坏的.

focus处理程序内部是否有一种方法可以知道click同一对象上有待处理的事件?或者在click处理程序中知道它以前刚刚处理过focus

Jua*_*des 17

下面是我认为基于该鼠标按下焦点之前发生的事实的作品的东西.见演示.

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;

});
Run Code Online (Sandbox Code Playgroud)

为了解决Josiah发现的错误,我将代码更改为以下内容.见演示.

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;
});
Run Code Online (Sandbox Code Playgroud)

一个问题是当你离开窗户并切换回来时,你不会得到"点击"或标签.您在具有焦点的输入上获得焦点事件,但您无法确定它是标签还是单击,因为它既不是.

我认为这是你最接近的,我会在你的页面上尝试这个,看看行为是否足够好.