检查元素是如何获得焦点的

上下文

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

问题

有没有办法告诉一个元素是如何进入focus的，是通过click还是tab？

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

我可以监听click事件，但是仍然需要监听focus来捕获选项卡-这将与click事件重叠，因为它还将聚焦文本区域，导致双重事件。

我可能需要重新思考这一点。

JSBin示例

$('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>

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

单击元素
Tab键或将Tab键切换到元素
jQuery程序焦点$( "#target" ).focus();
在程序之间切换，并重新调整互联网浏览器的焦点

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

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

onkeyup()非常适合捕捉选项卡事件，因为选项卡键在选项卡进入时会"向上"释放，但在选项卡退出时不会释放。

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);
}

您将需要焦点、单击和模糊事件的组合来确定"获得焦点"的来源。点击->设置值，聚焦->检查点击值是否已设置->做你必须做的事情->重置模糊。您可能还想查找ontotouchdown

您可以在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>

这里有一种扩展方法，可以在不重新路由事件或模拟额外操作的情况下实现：

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中添加更多选择器，并使用event.target.在处理程序中进行区分

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

上下文

问题

相关内容

最新更新

热门标签：