Question

我正在使用jquery ui自动完成，并希望在键盘交互和鼠标交互触发的焦点事件之间进行解密。我该怎么做呢？

$('input').autocomplete({
    source: function(request, response) {
        ...
    },
    focus: function(event, ui) {
        // If focus triggered by keyboard interaction
            alert('do something');
        // If focus event triggered by mouse interaction
            alert('do something else');
    }
});

由于

Answer 1

我能想到这样做的唯一方法是让一个处理程序监听keypress和click事件，并打开/关闭一个布尔标志。然后在输入的focus处理程序中，您可以检查标志的值是什么，然后从那里开始。

可能类似

var isClick;
$(document).bind('click', function() { isClick = true; })
           .bind('keypress', function() { isClick = false; })
           ;

var focusHandler = function () {
    if (isClick) {
        // clicky!
    } else {
        // tabby!
    }
}

$('input').focus(function() {
    // we set a small timeout to let the click / keypress event to trigger
    // and update our boolean
    setTimeout(focusHandler,100);
});

在jsFiddle上制作了一个小型工作原型（难道你不喜欢这个网站吗？）。 Check it out if you want.

当然，这一切都在focus上的<input>事件中运行，但自动完成的focus处理程序以相同的方式运行。

setTimeout会引入一些延迟，但在100毫秒时，根据您的需要可能会忽略不计。

Answer 2

实际上，您应该能够从传递给焦点事件的event-Object中确定这一点。根据您的代码结构，这可能会有所不同，但通常会有一个名为originalEvent的属性，可能会嵌套到某个深度。更仔细地检查event - 对象以确定正确的语法。然后通过正则表达式对mousenter或keydown进行测试。像这样：

focus: function(event, ui){
  if(/^key/.test(event.originalEvent.originalEvent.type)){
    //code for keydown
  }else{
    //code for mouseenter and any other event
  }
}

Answer 3

The easiest and most elegant way I've found of achieving this is to use the "What Input?" library. It's tiny (~2K minified), and gives you access to the event type both in scripts:

if (whatInput.ask() === 'mouse') {
  // do something
}

...and also (via a single data attribute that it adds to the document body) styles:

[data-whatinput="mouse"] :focus,
[data-whatinput="touch"] :focus {
  // focus styles for mouse and touch only
}

I particularly like the fact that where you just want a different visual behaviour for mouse / keyboard it makes it possible to do that in the stylesheet (where it really belongs) rather than via some hacky bit of event-checking Javascript (though of course if you do need to do something that's not just purely visual, the former approach lets you handle it in Javascript instead).

Answer 4

首先想到的是你可以找到鼠标的位置并检查它是否位于元素的位置

使用它来存储元素的位置：

var input = $('#your_autocompleted_element_id'),
    offset = input.offset(),
    input_x = offset.top,
    input_y = offset.left,
    input_w = input.outerWidth(),
    input_h = input.outerHeight();

然后使用它来在窗口中找到鼠标的绝对位置：

var cur_mx, cur_my;
$(document).mousemove(function(e){
   cur_mx = e.pageX;
   cur_my = e.pageY;
});

然后在您的自动完成设置中：

focus: function(event, ui) {
   // mouse is doing the focus when...
   // mouse x is greater than input x and less than input x + input width
   // and y is greater than input y and less than input y + input height
   if (cur_mx >= input_x && cur_mx <= input_x + input_w && cur_my >= input_y && cur_my <= input_y + input_h) {
      // do your silly mouse focus witchcraft here
   } else {
      // keyboard time!
   }
}

Answer 5

这可以使用 mousedown 事件处理，请参见下面的示例。

this.focusFrom = 'keyboard' => 

onFocus = () => {
    if (this.focusFrom === 'keyboard') {
        // do something when focus from keyboard
    }
}

handleMouseDown = () => {
    this.focusFrom = 'mouse';
}

handleOnClick = () => {
    this.focusFrom = 'keyboard';
}

区分键盘/鼠标触发的焦点事件

5 个答案: