Clinton Pierce Clinton Pierce - 3 months ago 12
jQuery Question

jQuery handing both focus and click on an element

I'm trying to determine workflow to fine-tune a data entry web application. Picture several address forms on a single web page:

1. Name___________
Street_________
Phone__________

2. Name___________
Street_________
Phone__________

[...many more...]


Now I'd like to know if the user is using the tab key to get to the second "Name" field (or anywhere within that record), or if they're using the mouse to click on it. (Or shift-tab to move in reverse.)

I've set a handler on both focus and click for the input fields:

$('input').click(function() { TabulateClick(this) });
$('input').focus(function() { TabulateFocus(this) });


And in the handler, I determine which address the user is working on and whether we've "switched" Address records. (If the focus was in "Phone" for the first address, and you click on the "Name" field in the same address, that's not actually switching records, so I don't tabulate that.)

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;
}


My problem is that when I mouse-click into the field the
focus
event fires first tabulating a false
switchedAddressesWithTab
and changing the currentAddress (that's bad). When the
click
handler runs, the
lastAddressRecord
is spoiled.

Is there a way inside of the
focus
handler to know that there is a pending
click
event on the same object? Or in the
click
handler to know that it was previously just handled by
focus
?

Answer

Here's something that I think works based on the fact that the mousedown happens before the focus. See 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;

});

To fix the bug discovered by Josiah, I changed my code to the below. See 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;
});

The one problem is that you don't get 'click' or tab when you switch away from the window and switch back. You get a focus event on the input that had focus, but you can't determine if it's a tab or a click, because it's neither.

I think this is the closest you'll get, I would try this on your page and see if the behavior is good enough.