Question

上下文

我有一个骨干应用程序，带有一个事件监听器，用于在textarea上进行焦点事件。 Backbone使用jQuery事件，所以我的问题的核心在于jQuery焦点事件。

问题

有没有办法说明元素是如何进入focus的，是click还是tab？

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

我可以收听click个事件，然而仍然需要听focus来捕捉标签 - 这会与click事件重叠，因为它会同时关注文本区域会导致双重事件。

我可以完全重新考虑这一点。谢谢你的想法！

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

.onfocus()监听器可以通过多种方式被调用，这使得即使绑定也很棘手。

点击元素
Tab或Shift-Tab to element
jQuery programatic focus $( "#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);
}

Answer 2

你将需要一个焦点组合，点击和模糊事件来确定＆＃34;获得焦点＆＃34;的起源。 click-＆gt;设定值，焦点 - ＆gt;检查是否设置了点击值 - ＆gt;做你必须做的事 - ＆gt;重置模糊。你可能也想留意ontouchdown

Answer 3

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

您需要blur textarea mousedown 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>

{{1}}

Answer 4

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

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

检查元素如何获得焦点

上下文

问题

4 个答案: