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

最新推荐文章于 2022-05-25 19:43:40 发布

会飞的兔子哒

最新推荐文章于 2022-05-25 19:43:40 发布

阅读量1.6k

点赞数

文章标签： windows 鼠标

本文链接：https://blog.csdn.net/dongxingyan1/article/details/78242300

版权

本文介绍了在Windows系统中遇到的一个开发问题，即在使用Angular框架开发时，onmousemove事件与click事件在Windows系统上无法正常区分。作者通过创建指令并测试发现，macOS系统能正确区分这两个事件，而Windows系统则存在冲突。经过研究，作者提出通过时间戳判断来区分click和mousemove事件，并展示了修改后的代码，成功解决了这一问题。

摘要由CSDN通过智能技术生成

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