焦点不是由点击触发的

Question

如何在聚焦输入但是焦点事件不是来自点击时触发动作？

$('#input').focus(function(){
  if(not come from click)
  {
    alert('Holla!');
  }
});

Answer 1

要在键盘和来自鼠标的"焦点"事件之间进行判断,您可以跟踪鼠标事件.

首先,要了解单击输入时发生的事件序列,或Tab键,请查看以下jsfiddle:http://jsfiddle.net/orlenko/fyFkk/

在其中,我们将记录mousedown,mouseup,click,focus和blur events.

<input type="text" id="zero"/>
<input type="text" id="one"/>

JavaScript的:

$(function() {
    var one = $('#one');

    one.mousedown(function() {
       console.log('mousedown');
    });

    one.mouseup(function() {
       console.log('mouseup');
    });

    one.click(function() {
       console.log('click');
    });

    one.focus(function() {
       console.log('focus');
    });

    one.blur(function() {
       console.log('blur');
    });

});

如果我们只需单击输入,然后单击另一个控件,我们将获得以下内容:

• 鼠标按下
• 焦点
• 鼠标松开
• 点击
• 模糊

但是如果我们选择进入和退出输入,我们将在控制台中看到:

• 焦点
• 模糊

因此,如果我们跟踪mousedown和模糊事件,我们可以在基于键盘的焦点和基于鼠标的焦点之间进行分析.例如:

$(function() {
    var one = $('#one');

    one.mousedown(function() {
       console.log('mousedown');
        $(this).data('mousedown', true);
    });

    one.mouseup(function() {
       console.log('mouseup');
    });

    one.click(function() {
       console.log('click');
    });

    one.focus(function() {
        if ($(this).data('mousedown')) {
            console.log('You clicked it!');
        } else {
            console.log('You tabbed it!');
        }
    });

    one.blur(function() {
       console.log('blur');
       $(this).data('mousedown', false);
    });

});

这个例子的小提琴:http://jsfiddle.net/orlenko/cwRAw/