jQuery mousedown + mousemove [英] Jquery mousedown + mousemove

问题描述

如何在鼠标按下并移动时在JQuery中创建事件？并且每次每次按下鼠标和移动鼠标都触发一次？

How can I create an event in JQuery triggered when the mouse is down and moving? And only triggered once each mousedown + mousemove?

推荐答案

已更新：

因此，好像您的鼠标不再位于onmouseup所绑定的元素上时，它将不会看到mouse up事件。有意义，当您停下来想一想，但是当mousedown事件发生在元素上时，作为UI用户，我们希望它知道它何时发布（即使它不在元素上）。

So, it looks like if your mouse is no longer over the element on which onmouseup is bound, it won't see the mouse up event. Makes sense, when you stop and think about it, but when the mousedown event happens over the element, we expect, as UI users, for it to know when it was released (even if it isn't over the element).

因此，要解决此问题，我们实际上在文档级别检测到了鼠标上移。

So, to get around this, we actually detect the mouseup on the document level.

var clicking = false;

$('.selector').mousedown(function(){
    clicking = true;
    $('.clickstatus').text('mousedown');
});

$(document).mouseup(function(){
    clicking = false;
    $('.clickstatus').text('mouseup');
    $('.movestatus').text('click released, no more move event');
})

$('.selector').mousemove(function(){
    if(clicking == false) return;

    // Mouse click + moving logic here
    $('.movestatus').text('mouse moving');
});

我在jsbin上尝试了一下，它似乎可以工作。在此处进行检查： http://jsbin.com/icuso 。要对其进行编辑（请参见JS和HTML），只需在URL末尾标记 edit。 http://jsbin.com/icuso/edit 。

I tried this out on jsbin, and it seems to work. Check it out here: http://jsbin.com/icuso. To edit it (see the JS and HTML), just tag "edit" on the end of the URL. http://jsbin.com/icuso/edit.

这篇关于jQuery mousedown + mousemove的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！