判断鼠标单双击事件
2017-07-02 12:44
441 查看
在做一个列表时,项目需要点击一行时分别触发单击事件和双击事件。然而现在提供的接口只有单击事件。
后来看源码,发现底层组件提供了单击事件和双击事件。尝试用这两个组件,在双击时触发了两次单击事件和一次单击事件。原来是底层组件内部没有判断单双击的逻辑。只是简单的把事件绑定到 DOM 原生的单双击事件上。
于是需要做一个延时判断单双击的方法。
思路是:创建一个计时器。如果 200ms 内没有另一次点击,那么触发单击事件,并销毁计时器;如果当前存在计时器(计时器 ID 存在),那么可以判定此次点击是双击事件。触发双击事件并重置销毁计时器 ID。
下面是代码:
可能有所纰漏,敬请指教
后来看源码,发现底层组件提供了单击事件和双击事件。尝试用这两个组件,在双击时触发了两次单击事件和一次单击事件。原来是底层组件内部没有判断单双击的逻辑。只是简单的把事件绑定到 DOM 原生的单双击事件上。
于是需要做一个延时判断单双击的方法。
思路是:创建一个计时器。如果 200ms 内没有另一次点击,那么触发单击事件,并销毁计时器;如果当前存在计时器(计时器 ID 存在),那么可以判定此次点击是双击事件。触发双击事件并重置销毁计时器 ID。
下面是代码:
function ClickTimer(that) { let timer = null; let flag = false; // false为单击 let prevRecord; this.click = function(time, record) { if (record == prevRecord) { if (timer) { // 是双击 that.props.onRowDbClick(prevRecord); clearTimer(); } else { timer = setTimeout(check, 200); } } else { clearTimer(); prevRecord = record; timer = setTimeout(check, 200); } } function check() { // 单击 that.props.onRowClick(prevRecord); clearTimer(); } function clearTimer() { clearTimeout(timer); timer = null; flag = false; } }
可能有所纰漏,敬请指教
相关文章推荐
- JS判断鼠标单双击事件
- Qt中判断鼠标的双击和单击事件
- javascript事件列表大全解说,点击事件,双击事件,触发事件,键盘事件,鼠标移...
- silverlight技巧 获取鼠标滚轮事件 及 判断获取组合键的方法
- Revit API Hook 之 拦截鼠标双击元素事件
- 扩展GridView(六)——数据行响应鼠标的单击和双击事件
- CListCtrl控件主要事件及LVN_ITEMCHANGED消息和鼠标双击列表项事件的处理
- java小程序中鼠标事件的响应处理(包含右键、双击等)
- Android 鼠标事件 (单击,双击,滑动)
- android中根据touch事件判断单击及双击
- libvlc 双击,鼠标事件消息响应
- winform获取鼠标当前位置和截取鼠标双击事件
- 鼠标双击事件
- C#如何添加鼠标滚轮事件以及判断鼠标滚轮的方向
- GridView行 添加鼠标双击事件
- MFC 鼠标双击响应单击事件
- Qt使用Windows Api模拟鼠标单击双击滚轮事件
- silverlight - 获取鼠标滚轮事件 及 判断获取组合键的方法
- CListCtrl控件主要事件及LVN_ITEMCHANGED消息和鼠标双击列表项事件的处理
- js区分鼠标单双击 阻止事件冒泡