鏈接在單擊時保留焦點，然後將鼠標從其上移開。但是，失去的時候我的mousedown鏈接，但再往前移開鼠標鏈接，並釋放鼠標焦點

Question

http://jsfiddle.net/nicktheandroid/bD37R/2/

我試圖擺脫的元素仍然有焦點，如果鏈路上的用戶mousedowns，但隨後從移動鼠標離開鏈接 - 同時仍然按住鼠標按鈕，然後釋放鼠標按鈕。對我而言，這意味着用戶在釋放鼠標按鈕之前意識到他們不想點擊鏈接 - 因此他們沒有在鏈接上釋放鼠標按鈕，而是將鼠標從鏈接上移開，然後釋放鼠標按鈕。

該元素可以是鏈接或具有活動和焦點樣式的div/span，它的工作原理相同。

在我的例子中，如果我點擊其中一個div，它就會像我想的那樣工作，但是當我使用鼠標時，它會將焦點移開，這不應該發生。只有當用戶在鏈接/ div上放置鼠標時，才應該將焦點帶走，然後將鼠標從元素中拉出，然後釋放鼠標按鈕。但是我希望元素在單擊元素時保持焦點樣式，然後在單擊元素後將其懸停。這是我的問題，如果我點擊元素，然後點擊後我將鼠標移離元素，它會失去焦點。我知道我的jQuery不正確，出於某種原因，我很難弄清楚jQuery應該是什麼樣子。

$('div').mousedown(function(){ 
    $(this).mouseleave(function(){ 
     if ($(this).mousedown()) { 
      $(this).blur() 
     } 
    }) 
}) 

Answer 1

這是我能想到的最好的。不優雅，但完成了工作。問題是焦點事件發生在mouseup上。但是你不知道mouseup事件將發生在哪裏。所以我們必須使用全局來追蹤它。

http://jsfiddle.net/bD37R/4/

//keep track of whether the mouse is down or up 
var mouseDown; 
document.body.onmousedown = function() { 
    mouseDown = true; 
} 
document.body.onmouseup = function() { 
    mouseDown = false; 
}  

//store currently selected element 
var activeElement; 

//on mouse leave check whether the mouse is down. if so store the element for 
//release on mouse up 
$('div').mouseleave(function() { 
    console.log(mouseDown); 
    if (mouseDown) { 
     console.log('blur'); 
     activeElement = $(this); 
    }  
    else { activeElement = null; } 
}) 

//release the element 
$(document).mouseup(function() { 
    if (activeElement) { 
    console.log('active Element'); 
     activeElement.blur(); 
    } 
});