Jquery mousedown + mousemove

Jquery mousedown + mousemove

提问by M Rostami

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

当鼠标按下并移动时，如何在 JQuery 中创建一个事件？并且每次 mousedown + mousemove 只触发一次？

回答by Matt

Updated:

更新：

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).

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

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');
});

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.

我在 jsbin 上尝试了这个，它似乎有效。在这里查看：http: //jsbin.com/icuso。要编辑它（参见 JS 和 HTML），只需在 URL 末尾标记“edit”。 http://jsbin.com/icuso/edit。

回答by M Rostami

use following code

使用以下代码

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

Update :
For some browsers you may want to use this :

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

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

回答by Carlos Vasconcelos

I did the following for an audio volume controller:

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

$('#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')
    });
});

回答by Nonesome

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?

javascript 事件 e.which？

回答by niraj

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

回答by ArkahnX

For anyone else coming to this thread in search of generic assistance for jQuery mouseup, mousemoveand mousedownusing dynamically loaded content, I found (In chrome at least) this modification of Matt's postto be functional:

对于任何人来到这个线程搜索的jQuery通用的援助mouseup，mousemove并mousedown使用动态加载的内容，我发现（在Chrome中至少）的这种修改马特的职位是功能性：

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()binds to all present and future elements, so if you need to add a mousemoveand mousedownto a dynamically created element, this should work (again, in chrome at least).

http://api.jquery.com/live/jQuery$.live()绑定到所有当前和未来的元素，因此如果您需要将mousemoveand添加mousedown到动态创建的元素，这应该可以工作（同样，至少在 chrome 中）。

回答by brian blocker

This might help the situation... there is some difficulty when dealing w/ iframes. I'm currently working on a project needing to resize elements in an iframe.

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

Say you have an iframe with an id of 'iframe'. I have only tested this in FF, but it's working:

假设您有一个 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(){...});
}

I try to bind everything to the document, or in this case, to the iframe's document, and then when an event happens, I call a function that determines what exactly was the target. Keep in mind that jQuery has a pretty cool feature in that you can wrap the event target in a jQuery function:

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

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

Hope this helps! And I hope it works in the other browsers or I'm going to be really frustrated in a few days :o

希望这可以帮助！我希望它可以在其他浏览器中运行，否则几天后我会非常沮丧：o

回答by Ducain

The answer can be found in another SO topic:
Firefox drags div like it was an image

答案可以在另一个 SO 主题中找到：
Firefox drags div like it was an image

You need to return false from the event handlers to prevent the default action

您需要从事件处理程序返回 false 以防止默认操作

Once I put a return false in my event handlers, it worked like a charm.

一旦我在我的事件处理程序中设置了 return false ，它就像一个魅力。

回答by KoleS

e.preventDefault();

and eis the event handler you pass to the function

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

回答by djrconcepts

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


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