windows系统上的onmousemove和click事件总结（2017年10月14日）

54 阅读 0 评论 36 点赞

我是靠谱客的博主舒适发卡，最近开发中收集的这篇文章主要介绍windows系统上的onmousemove和click事件总结（2017年10月14日），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天在开发过程中遇到了一个神奇的问题，产品提了一个需求要求在鼠标移动过程中实现侧边工具的显示和鼠标点击过程中实现工具栏的显示和隐藏，也在一段时间内鼠标没有任何操作的时候隐藏工具栏。
因为我用的开发框架是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');
}
});