这几天在和US的同事讨论一个关于鼠标单击和双击的行为呈现问题,在这里拿来分享一下。
因为这是一个日历控件。日历控件支持年份的显示。年份显示的页面里,有该年所有月的日历。我们都知道日历控件本身会有事件。
最初的需求是,如果用户点击月的天,那么要弹出一个窗口,这个窗口显示该天所有的事件排列。双击的时候,能够从年份所在的页面,切换到所双击所在的天的视图。在实现的过程中,就发现一个问题。每次双击,都会触发单击事件。这就意味着,在进入选中当天的视图之前,总要会弹出事件列表窗口。这让人难以接受。
后来经过讨论。得出了两套方案。
一种。只支持单击或者双击事件。用onmouseover去替代。
但是这个又引入一个问题,用户只是鼠标滑过,那么这个时候不见得就需要弹出事件列表。
第二种,只支持单击或者双击事件,另外加个detail按钮,进入选中天的视图。
我们主要讲一下第一种。
由于用onmouseover去处理,会带来额外的开销,窗口弹出的事件列表是动态往服务器发送请求并进行展示。那么如何能够判断用户是真的想看当天的事件列表,而不是鼠标滑过而已呢。那就有个悬停策略。
悬停策略是,当用户的鼠标停留达到500ms,那么就认为用户需要查看事件列表。从用户的视觉反应来看,这个是能接受的。
那如何知道用户在这里停留了超过或者达到500ms,那就需要引入另一个机制,当发生onmouseover的时候,对globalmouse注册事件监听onmousemove事件。
第一次悬停的时候,记录一下当前的鼠标的x,y.然后过了500ms,它再继续检测一下当前的x,y,如果不发生变化,那就要弹出事件列表。
当鼠标离开当前月份的视图的时候,将注册事件清除。
运用的类都很简单,lz.Timer和lz.Delegate就能做到。