检测焦点事件是否由 user/browser 或 jQuery 触发

Question

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

typeof event.originalEvent != "undefined"

不幸的是，焦点事件的行为有所不同。请检查 example.

尝试点击第一个<input>然后点击"trigger click"按钮进行第二个输入，你会看到click undefined，什么意思event.originalEvent是不存在。然后尝试点击第一个 <input> 然后点击 "trigger focus" 按钮进行第二个输入，你会看到 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>

检测焦点事件是否由 user/browser 或 jQuery 触发

Detect if focus event was triggered by user/browser or jQuery

javascript

jquery

jquery-events