Question

如何在鼠标停止并移动时触发JQuery中创建事件？每次mousedown + mousemove只触发一次？

Answer 1

更新：

因此，看起来如果您的鼠标不再位于绑定onmouseup的元素上，它将不会看到鼠标按下事件。有意义的是，当你停下来思考它时，但当mousedown事件发生在元素上时，我们希望，作为UI用户，它知道它何时被释放（即使它不在元素上）。

因此，为了解决这个问题，我们实际上在文档级别检测了mouseup。

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的末尾标记“编辑”。 http://jsbin.com/icuso/edit

Answer 2

使用以下代码

$(element).mousemove(function(e){
 if(e.which==1)
 {
   #do job
 }
});

更新：
对于某些浏览器，您可能想要使用它：

$(element).mousemove(function(e){
 if(e.buttons==1)
 {
   #do job
 }
});

Answer 3

我为音量控制器执行了以下操作：

$('#control-vol').bind('mousedown', function(e){
    $('#control-vol').bind('mousemove', function(e){
        var volumen = e.pageX - this.offsetLeft;
        $('#barra-vol').width(volumen + 'px');
        $('audio')[7].volume = volumen/50;
    });

    $('#control-vol').bind('mouseup',function(){
        $('#control-vol').unbind('mousemove')
    });
});

Answer 4

这可能有助于这种情况......处理w / iframe时存在一些困难。我目前正在开发一个需要在iframe中调整元素大小的项目。

假设你有一个id为'iframe'的iframe。我只在FF中对此进行了测试，但它正在运行：

var $iframe = $('#iframe');
$iframe.load(function()
{
  var $body = $iframe.contents().find('HTML');
  /* ...bind your events here to $body.. */
  $body.mousedown(function(){...});
  $mody.mouseup(function(){...});
}

我尝试将所有内容绑定到文档，或者在这种情况下，绑定到iframe的文档，然后当事件发生时，我调用一个函数来确定目标究竟是什么。请记住，jQuery有一个很酷的功能，你可以将事件目标包装在jQuery函数中：

$(selector).click(function(e)
{
  var id = $(e.target).attr('id');
});

希望这有帮助！我希望它可以在其他浏览器中运行，或者我会在几天内感到非常沮丧：o

Answer 5

对于使用动态加载的内容来jQuery mouseup，mousemove和mousedown寻找通用帮助的其他人，我发现（至少在Chrome中）这个修改Matt's post功能正常：

var clicking = false;

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

$(document).live("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');
});

http://api.jquery.com/live/ jQuery $.live()绑定到所有现在和将来的元素，因此如果您需要向动态创建的元素添加mousemove和mousedown，这应该可行（至少在chrome中）。

Answer 6

document.onmousedown = function(e) {
    e = e || window.event;
    var button = (type e.which != "undefined") ? e.which : e.button;
    if (button == 1) {
        alert("Left mouse button down");
    }
};

javascript event e.which?

Answer 7

$("element").mousedown(function () {
    $(this).mousemove(function () {
        console.log("OK Moved!");
    });
}).mouseup(function () {
    $(this).unbind('mousemove');
}).mouseout(function () {
    $(this).unbind('mousemove');
});

Answer 8

e.preventDefault();

和e是您传递给函数的事件处理程序

Answer 9

$(document).on('mousedown', function() {
    $(document).bind('mousemove', function() {
        $('#id-name').dosomething();
    });
});


$(document).on('mouseup', function() {
    $(document).unbind('mousemove');
});

Answer 10

我们像这样使用$ .bind（）：

$('#div').bind('mousemove mousedown', function(){});

这意味着无论是mousemove还是mousedown触发，该函数都会执行。所以在函数中，我们仍然能够通过使用event.which来检查左按钮是否按下，因此代码应该如下所示：

$('#div').bind('mousemove mousedown', function(e){
        if(e.which == 1){
            //let the fun begin
        }
    });

Answer 11

可能是：

$('input').mousedown(function{
    $('input').mousemove({
      etc
    });
});

但由于某种原因，我认为你已经尝试过了..

Jquery mousedown + mousemove

12 个答案: