账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    如何合理节流onmousemove事件？
    42
    0 
        //鼠标点击开始
    center[0].onmousedown = function () {
    
        docMove();

        //数据释放
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };

    function docMove() {
        document.onmousemove = function (e) {
            var e     = e || window.event;
            var newX  = e.clientX;
            
           //通过newX动态设置元素css来达到改变位置的效果
           
            //阻止冒泡
            e.stopPropagation();
        };
    }

    问题：如何通过setTimeout达到函数节流，提升性能？
    PS：目前事件执行还有一个小问题，就是在移动元素的过程中会间接性出现鼠标已经释放但onmousemove 并未失效的问题，（实际观感就是鼠标左键已经释放，但是元素还会跟着鼠标移动）

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 寡ジ交◣ 普通会员 1楼

      在JavaScript中，onmousemove事件是一种绑定在鼠标在页面上移动时触发的事件。你可以使用这个事件来处理用户的鼠标移动行为。以下是一个简单的例子：

      ```javascript var x = 0; var y = 0;

      // 添加鼠标移动事件监听器 document.addEventListener('mousemove', function(event) { x = event.clientX; y = event.clientY; });

      // 显示鼠标位置 document.getElementById('myElement').style.left = x + 'px'; document.getElementById('myElement').style.top = y + 'px'; ```

      在这个例子中，我们首先获取了鼠标的位置（x和y坐标），然后在元素的style属性中设置了新的left和top属性，这样用户在鼠标移动时，元素的位置就会自动更新。

      如果你想在鼠标离开页面时停止监听这个事件，你可以使用removeEventListener方法：

      javascript // 停止鼠标移动事件监听器 document.removeEventListener('mousemove', function(event) { console.log('鼠标离开页面'); });

      在这个例子中，我们使用removeEventListener方法移除了事件监听器，这样在鼠标离开页面时，这个事件就不会被触发了。

      如果你想在鼠标移动时显示一个警告消息，你可以使用console.log方法：

      javascript // 显示警告消息 console.log('鼠标移动');

      在这个例子中，我们在鼠标移动时打印了一个警告消息，这样用户就可以看到他们在移动时正在做什么。

    0 打赏 回复
    • 知白 普通会员 2楼

      在JavaScript中，onmousemove事件是一种绑定在鼠标在页面上移动时触发的事件。你可以使用这个事件来处理用户的鼠标移动行为。以下是一个简单的例子：

      ```javascript var x = 0; var y = 0;

      // 添加鼠标移动事件监听器 document.addEventListener('mousemove', function(event) { x = event.clientX; y = event.clientY; });

      // 显示鼠标位置 document.getElementById('myElement').style.left = x + 'px'; document.getElementById('myElement').style.top = y + 'px'; ```

      在这个例子中，我们首先获取了鼠标的位置（x和y坐标），然后在元素的style属性中设置了新的left和top属性，这样用户在鼠标移动时，元素的位置就会自动更新。

      如果你想在鼠标离开页面时停止监听这个事件，你可以使用removeEventListener方法：

      javascript // 停止鼠标移动事件监听器 document.removeEventListener('mousemove', function(event) { console.log('鼠标离开页面'); });

      在这个例子中，我们使用removeEventListener方法移除了事件监听器，这样在鼠标离开页面时，这个事件就不会被触发了。

      如果你想在鼠标移动时显示一个警告消息，你可以使用console.log方法：

      javascript // 显示警告消息 console.log('鼠标移动');

      在这个例子中，我们在鼠标移动时打印了一个警告消息，这样用户就可以看到他们在移动时正在做什么。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部