windows系统上的onmousemove和click事件总结(2017年10月14日)
来源:互联网 发布:php 魔术函数 编辑:程序博客网 时间:2024/05/21 10:17
今天在开发过程中遇到了一个神奇的问题,产品提了一个需求要求在鼠标移动过程中实现侧边工具的显示和鼠标点击过程中实现工具栏的显示和隐藏,也在一段时间内鼠标没有任何操作的时候隐藏工具栏。
因为我用的开发框架是angular,所以我用angular封装了一个指令,来实现上述的需求:
代码如下:
angular.module('pexapp').directive('idleTimer', function($interval) { 'use strict'; return { link: function(scope, element, attrs) { var interval = parseInt(attrs.interval) || 500; var idleAfter = parseInt(attrs.idleAfter) || 5000; var idleTime = 0; var disableCheck = attrs.disableIdle; var state; var count = 0; var timeStamp; element.on('mousemove', function() { console.log("mouse move"); idleTime = 0; state = 'active'; element.removeClass('idle'); }); element.on('click', function() { count++; if(state === 'active' && count %2 === 1 ) { state = 'idle'; element.addClass('idle'); } else if (state === 'idle' && count %2 === 1) { idleTime = 0; state = 'active'; element.removeClass('idle'); } if(state === 'active' && count %2 === 0) { state = 'idle'; element.addClass('idle'); }else if (state === 'idle' && count %2 === 0) { idleTime = 0; state = 'active'; element.removeClass('idle'); } }); $interval(function() { idleTime += interval; var enableIdle; if (!disableCheck) { enableIdle = true; } else { if (scope.connection) { enableIdle = scope.connection[disableCheck]; } else { enableIdle = true; } } if (state !== 'idle' && idleTime >= idleAfter && enableIdle) { state = 'idle'; element.addClass('idle'); } }, interval); } };});
指令封装好了,我测试了一下,其他都可以使用,但是我发现了一个很神奇的问题,那就是在mac系统中是可以完全实现上述功能的,但是在windows系统中却没有办法实现通过click来实现工具栏的显示和隐藏,百思不得其解,为什么在mac上可以,但是在windows系统上却不可以呢,我上网查了一下,难道是mousemove事件和click事件冲突了吗,可是发现只有mousedown和mouseup与click事件会冲突,但是却没有看到说mousemove和click事件会冲突的,到底是怎么回事呢,于是我决定在mac和windows系统上试一下到底是怎么回事,我写了一个简单的demo,代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ width: 300px; height: 300px; background:pink } </style></head><body><h1></h1><script> var body = document.querySelector("h1"); var timeStamp; body.addEventListener("mousedown", function () { console.log("mouse down"); }, false); body.addEventListener("mouseup", function () { console.log("mouse up"); }) body.addEventListener("mousemove", function () { console.log("mouse move"); }) body.addEventListener("click", function () { console.log("click"); })</script></body></html>
在mac和windows上测试的效果分别是:mac上鼠标移动的时候不会触发click等事件,点击的时候不会触发mousemove等事件;但是在windows上就不一样了,不论是click事件还是MouseMove事件,其他三种事件都会被触发,终于找到问题的根源了,接下来该解决的就是如何处理这种区别,也就是说如何在windows系统上区分click和mousemove事件呢,想到一种方法就是通过时间戳对两者进行区别,于是对我的demo进行了一定的修改
<script> var body = document.querySelector("h1"); var timeStamp; body.addEventListener("mousedown", function (e) { console.log("mouse down"); }, false); body.addEventListener("mouseup", function (e) { console.log("mouse up"); timeStamp = e.timeStamp; }) body.addEventListener("mousemove", function (e) { if (!timeStamp || ( e.timeStamp - timeStamp > 10)) { console.log("mouse move"); } }) body.addEventListener("click", function (e) { if (!timeStamp || ( e.timeStamp - timeStamp > 10)) { console.log("click"); } })</script>
通过这样的方法成功的解决在windows系统上多种事件同时触发的情况,在我的指令中对代码进行了如下修改,成功解决了这个问题:
var timeStamp; element.on('mousemove', function(e) { if (!timeStamp || ( e.timeStamp - timeStamp > 10)) { console.log("mouse move"); idleTime = 0; state = 'active'; element.removeClass('idle'); } }); element.on('click', function(e) { timeStamp=e.timeStamp; count++; if(state === 'active' && count %2 === 1 ) { state = 'idle'; element.addClass('idle'); } else if (state === 'idle' && count %2 === 1) { idleTime = 0; state = 'active'; element.removeClass('idle'); } if(state === 'active' && count %2 === 0) { state = 'idle'; element.addClass('idle'); }else if (state === 'idle' && count %2 === 0) { idleTime = 0; state = 'active'; element.removeClass('idle'); } });
- windows系统上的onmousemove和click事件总结(2017年10月14日)
- stemapp7月9日版测试dojo的click、onmouseover事件成功
- Win10 系统和C盘的 新优化记录(2017年12月02日)
- 2017年1月17日学习总结----系统调用和库函数
- 2017年4月14日22:52 的总结
- 2015年10月14日总结
- 2017年10月14日 第五次总结
- 鼠标事件onmousemove的clientY
- 获取系统当前的日期年,月,日和getInstance()
- 数据库系统概论学习笔记(10月14日首发,10月22日更新)
- 2017年1月22日学习总结----TCP和UDP的区别
- onmousemove事件
- 2017年12月20日的总作总结
- 函数的复习(10月15日学习总结)
- 2017年8月10日---阶段性工作总结(事件驱动)
- windows系统下SVN服务器的搭建_2014年1月2日
- CListControl的OnMouseMove和OnNcHitTest
- onmouseover 和onmousemove的区别
- 文章标题
- Codeforces Round #440 (Div. 2, based on Technocup 2018 Elimination Round 2)
- stm32晶振
- Java研发方向如何准备BAT技术面试答案(上)
- 新手科普|探索机器学习模型,保障账户安全
- windows系统上的onmousemove和click事件总结(2017年10月14日)
- 用大数据看智慧法院建设 打造“信息化3.0
- Android6.0权限申请示例
- LeetCode 学习 LinkedList 专项(3)—— Remove Duplicates from Sorted List
- e之美,数学里的 e 为什么叫做自然底数?是不是自然界里什么东西恰好是 e?
- 关于安防与大数据 不能不说的九个发展趋势
- android抓包
- WM Splitter 2.2.1409.zip
- ElasticSearch java API