检测焦点事件是由用户/浏览器还是 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>