Cli*_*rce 12 javascript mouse jquery events focus
我正在尝试确定微调数据输入Web应用程序的工作流程.在单个网页上显示几个地址表单:
1. Name___________
Street_________
Phone__________
2. Name___________
Street_________
Phone__________
[...many more...]
Run Code Online (Sandbox Code Playgroud)
现在我想知道用户是否正在使用tab键进入第二个"Name"字段(或该记录中的任何位置),或者他们是否使用鼠标点击它.(或移位标签反向移动.)
我在焦点和点击上为输入字段设置了一个处理程序:
$('input').click(function() { TabulateClick(this) });
$('input').focus(function() { TabulateFocus(this) });
Run Code Online (Sandbox Code Playgroud)
在处理程序中,我确定用户正在处理哪个地址以及我们是否"切换"了地址记录.(如果焦点位于第一个地址的"电话"中,并且您单击同一地址中的"名称"字段,那么实际上并未切换记录,因此我不会将其列表.)
function TabulateClick(field)
{
var currentAddressRecord = FindAddress(field);
if ( lastAddressRecord != currentAddressRecord )
switchedAddressesWithClick++;
lastAddressRecord = currentAddress;
}
function TabulateFocus(field)
{
var currentAddress = FindAddress(field);
if ( lastAddressRecord != currentAddressRecord )
switchedAddressesWithTab++;
lastAddressRecord = currentAddress;
}
Run Code Online (Sandbox Code Playgroud)
我的问题是当我鼠标点击进入该字段时,focus
事件将首先触发一个false switchedAddressesWithTab
并更改currentAddress(这是坏的).当click
处理器运行时,lastAddressRecord
是被宠坏的.
focus
处理程序内部是否有一种方法可以知道click
同一对象上有待处理的事件?或者在click
处理程序中知道它以前刚刚处理过focus
?
Jua*_*des 17
下面是我认为基于该鼠标按下焦点之前发生的事实的作品的东西.见演示.
var lastClick = null;
$('input').mousedown(function(e) {
lastClick = e.target;
}).focus(function(e){
if (e.target == lastClick) {
console.log('click');
} else {
console.log('tab');
}
lastClick = null;
});
Run Code Online (Sandbox Code Playgroud)
为了解决Josiah发现的错误,我将代码更改为以下内容.见演示.
var lastFocusedElement = null;
var isClick = false;
$('input').mousedown(function(e) {
isClick= true;
}).focus(function(e){
// To prevent focus firing when element already had focus
if (lastFocusedElement != e.target) {
if (isClick) {
console.log('click ----');
} else {
console.log('tab -----');
}
lastFocusedElement = e.target;
isClick = false;
}
});
$(document.body).focus(function(){
lastFocusedElement = document.body;
});
Run Code Online (Sandbox Code Playgroud)
一个问题是当你离开窗户并切换回来时,你不会得到"点击"或标签.您在具有焦点的输入上获得焦点事件,但您无法确定它是标签还是单击,因为它既不是.
我认为这是你最接近的,我会在你的页面上尝试这个,看看行为是否足够好.
归档时间: |
|
查看次数: |
28927 次 |
最近记录: |