检测焦点事件是否由用户/浏览器或 jQuery 触发

Question

我试图检测焦点事件是否由用户（手动）触发。当涉及到click事件时，可以检查event.originalEvent处理程序方法中是否存在：

typeof event.originalEvent != "undefined"

不幸的是，它对于焦点事件的行为不同。请检查示例。

尝试点击第一个<input>，然后点击第二个输入的“触发点击”按钮，你会看到click undefined，这意味着event.originalEvent不存在。然后尝试点击第一个，<input>然后点击第二个输入的“触发焦点”按钮，你会看到focus object，event.originalEvent这次出现了。

• 如何检测焦点事件是否由用户触发（非以编程方式）？

Answer 1

应用mousedown事件来检查是否是用户操作：

$(document).ready(function() {

  var isUserClick = false;
  $("input").mousedown(function() {
    isUserClick = true;
  });
  $("input").on("click focus blur", function(event) {
    console.log(event.type, typeof event.originalEvent, isUserClick ? 'user' : 'script');
    setTimeout(function() {
      isUserClick = false;
    }, 200);
  });
  $("button").click(function() {
    $("input." + $(this).attr("class")).trigger($(this).data("event"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
FIRST:
<input class="first" />
<button class="first" data-event="click">trigger click</button>
<button class="first" data-event="focus">trigger focus</button>
<button class="first" data-event="blur">trigger blur</button>
<br>
<br> SECOND:
<input class="second" />
<button class="second" data-event="click">trigger click</button>
<button class="second" data-event="focus">trigger focus</button>
<button class="second" data-event="blur">trigger blur</button>
<br>