Question

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

我正试图摆脱一个仍然具有焦点的元素，如果用户在某个链接上移动，但随后将鼠标移离链接 - 同时仍然按住鼠标按钮，然后释放鼠标按钮。对我来说，这意味着用户意识到他们不想在发布鼠标按钮之前点击链接 - 因此他们没有在链接上释放鼠标按钮，而是将鼠标移离链接，然后释放鼠标按钮。

元素可以是链接，也可以是具有活动和焦点样式的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();
  }
});

链接在单击时保持焦点，然后将鼠标移开。但是当我mousedown链接然后移动mouseoff链接并释放鼠标时失去焦点

1 个答案: