这几天在和US的同事讨论一个关于鼠标单击和双击的行为呈现问题，在这里拿来分享一下。

 

因为这是一个日历控件。日历控件支持年份的显示。年份显示的页面里，有该年所有月的日历。我们都知道日历控件本身会有事件。

最初的需求是，如果用户点击月的天，那么要弹出一个窗口，这个窗口显示该天所有的事件排列。双击的时候，能够从年份所在的页面，切换到所双击所在的天的视图。在实现的过程中，就发现一个问题。每次双击，都会触发单击事件。这就意味着，在进入选中当天的视图之前，总要会弹出事件列表窗口。这让人难以接受。

 

后来经过讨论。得出了两套方案。

 

一种。只支持单击或者双击事件。用onmouseover去替代。

 

但是这个又引入一个问题，用户只是鼠标滑过，那么这个时候不见得就需要弹出事件列表。

 

第二种，只支持单击或者双击事件，另外加个detail按钮，进入选中天的视图。

 

我们主要讲一下第一种。

 

由于用onmouseover去处理，会带来额外的开销，窗口弹出的事件列表是动态往服务器发送请求并进行展示。那么如何能够判断用户是真的想看当天的事件列表，而不是鼠标滑过而已呢。那就有个悬停策略。

 

悬停策略是，当用户的鼠标停留达到500ms，那么就认为用户需要查看事件列表。从用户的视觉反应来看，这个是能接受的。

 

那如何知道用户在这里停留了超过或者达到500ms,那就需要引入另一个机制，当发生onmouseover的时候，对globalmouse注册事件监听onmousemove事件。

 

第一次悬停的时候，记录一下当前的鼠标的x,y.然后过了500ms，它再继续检测一下当前的x,y，如果不发生变化，那就要弹出事件列表。

 

当鼠标离开当前月份的视图的时候，将注册事件清除。

 

运用的类都很简单，lz.Timer和lz.Delegate就能做到。