jQuery交出焦點並點擊元素

Question

我正在嘗試確定工作流以微調數據錄入Web應用程序。想象幾個地址形式單一的網頁上：

1. Name___________ 
    Street_________ 
    Phone__________ 

    2. Name___________ 
    Street_________ 
    Phone__________ 

    [...many more...] 

現在我想知道，如果用戶使用Tab鍵進入第二個「名稱」字段（或記錄內的任何地方），或如果他們使用鼠標點擊它。 （或者Shift-Tab鍵反向移動。）

我給自己定一個處理器上的兩個重點，點擊輸入字段：

$('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處理？

Answer 1

這裏的，我認爲基於該鼠標按下焦點之前發生的事實的作品的東西。見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; 
}); 

一個問題是，當您切換離開窗口並切換回來時，您不會獲得「單擊」或選項卡。您在焦點輸入上獲得焦點事件，但無法確定它是標籤還是點擊，因爲它既不是。

我認爲這是最接近你會得到，我會嘗試在您的網頁上，看看這種行爲是否足夠好。

Answer 2

只需綁定焦點，然後檢查事件以查看是否e.which == 9 // tab。

我原來的想法沒有奏效（謝謝@Juan）。使用事件組合應該可以讓你到達你想要的位置。 如果用戶點擊進入文本框，最後的按鍵不會是標籤。所有輸入都在觀看並存儲要傳遞給焦點事件的最後一個鍵碼。 here is the fiddle

var lastKeyCode = 0; 
$('input').focus(function(e) { 
    if(lastKeyCode == 9) 
     // tabbed into field 
    else 
     // clicked into field 
}).keydown(function(e){ 
    if(e.which == 9) // added timeout to clear lastkeypress 
     setTimeout(function(){lastKeyPress = 0}, 50); 
    lastKeyPress = e.which; // store last key code 
}); 

Answer 3

您可以在jQuery中使用.on()方法。這是另一種在同一個元素上綁定兩個事件的方法。

var hasClicked = false; 
$('.myinputfield').on('mousedown : click',function(e){ 
    if (e.type == 'mousedown') { 
     // execute code 
     hasClicked = true; 
    } 
    if(e.type == 'focus' && !hasClicked) { 
     //execute code 
     console.log(e.type) 
    } 
    hasClicked = false; 
});