如何使用Javascript检查用户是否将焦点从一个特定元素转移到另一个元素？

Question

如何检查用户是否将焦点从某个特定元素转移到另一个特定元素？像这样：

// If focusing out of inputA to inputB
if ($("#inputA").focusingTo("#inputB")) {
  // do something
}

Answer 1

// When focus A
$('#inputA').focus(function() {
    // if the mouse is over 'B' then show #message
    $('#inputB').mouseover(function() {
    	// action
    	$('#message').removeClass('hidden');
    });
    // else hide #message
    $('#inputB').mouseleave(function() {
    	// action
    	$('#message').addClass('hidden');
    });
});

// if 'A' loses focus
$('#inputA').blur(function() {
     // Clear Listeners
     $("#inputB").off("mouseover").off('mouseleave');
     $('#message').addClass('hidden');
});

.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
  <input id="inputA" name="inputA" value="inputA" />
  <span id="message" class="hidden">on B</span>
</div>

<div >
  <input id="inputB" name="inputB" value="inputB" />
</div>

Answer 2

您只需要在此处理程序内进行所需的检查即可。 请注意，该类仅允许您将其附加到所需的元素上。

var previousFocus = null;

$('.monitored').focus(function() {
  var previous = previousFocus ? 'object '+previousFocus : 'nowhere';
  console.log('focused on ' + this.id + ' coming from ' + previous);
  previousFocus = this.id;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
  <input class="monitored" id="inputA" name="inputA" value="inputA" />
</div>

<div >
  <input class="monitored" id="inputB" name="inputB" value="inputB" />
</div>