检查元素如何获得焦点

Question

上下文

我有一个 backbone 应用程序，它有一个事件侦听器，用于文本区域上的焦点事件。 Backbone 使用 jQuery 事件，所以我的问题的核心围绕 jQuery 焦点事件。

问题

有没有办法判断一个元素是如何进入 focus 的，是 click 还是 tab？

需要在这两种情况下以不同方式处理光标定位的行为，但是似乎没有办法区分这两种情况。

我可以收听 click 事件，但是仍然需要收听 focus 来捕获跳键 - 这将与 [=13= 重叠] 事件，因为它也会聚焦文本区域，导致双重事件。

我可能会完全重新考虑这个问题。

JSBin Example

$('textarea')
  .focus(function(event){
    console.log('You focused me by' + event.type);
  // Here I wish I know if the focus came from a 'click' or 'tab' events
  });

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
    <form>
        <input placeholder="focus me, then tab" type="text"><br>
        <textarea>Focus me via click.   Now try via tabbing.</textarea> 
    </form>
</body>
</html>

Answer 1

您将需要焦点、点击和模糊事件的组合来确定 "getting focus" 的来源。单击 -> 设置值，焦点 -> 检查是否设置了该点击值 -> 做你必须做的 -> 在模糊时重置。您可能还想寻找 ontouchdown

Answer 2

您可以在 mousedown 上设置一个 clicked 变量。

您需要 blur mousedown 上的 textarea 以便 focus 将在 mouseup 上触发：

var clicked= false;

$('textarea')
  .focus(function(event) {
    if(clicked) {
      $('#status').html('clicked');
      clicked= false;
    }
    else {
      $('#status').html('tabbed');
    }
  })
  .mousedown(function(event) {
    clicked= true;
    $(this).blur();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input placeholder="focus me, then tab" type="text"><br>
  <textarea>Focus me via click.   Now try via tabbing.</textarea> 
</form>
<div id="status"></div>

Answer 3

这是一种无需重新路由事件或模拟额外操作的缩放方法：

var targ=$('textarea');

targ.focus(function(event){
    console.log('You focused me by ' + targ.eventType);
  // Here I wish I know if the focus came from a 'click' or 'tab' events
  });

$("body").mousedown(function(e){
   targ.eventType="mouse";
 }).keydown(function(e){
   targ.eventType="keyboard";
 });

这使用 jQuery 集合来存储最后一个事件类型，它由文档范围的处理程序设置。

如果您需要在其他输入类型上重新使用此功能，只需将更多选择器添加到 targ 并使用 [=24= 在处理程序中进行区分].

http://jsbin.com/ruqekequva/2/edit

Answer 4

.onfocus() 侦听器可以通过多种方式调用，这使得绑定变得棘手。

点击元素
Tab 或 Shift-Tab 到元素
jQuery 程序化焦点 $( "#target" ).focus();
在程序之间切换，并重新聚焦互联网浏览器

onfocus 事件中没有唯一标识符来确定它是如何进入焦点的。

根据我的发现，最好更明确地监听 click() 和 onkeyup() 事件以处理它们之间的独特行为并避免意外的函数调用（例如浏览器重新聚焦）。

onkeyup() 非常适合捕获 Tab 键事件，因为 Tab 键将在 Tab 键进入时释放 'up'，但在 Tab 键退出时不会释放。

JSBin

$('textarea')
 .click(focusedBy)
 .keyup(checkTab);

function checkTab(event){
 if (event.keyCode === 9) {
  focusedBy(event);
 }
}

function focusedBy (event){
 console.log('You focused me by ' + event.type);
}

检查元素如何获得焦点

Checking how an element gained focus

javascript

jquery

onfocus

backbone.js

backbone-events

上下文

问题