jQuery mousedown + mousemove答案

【问题标题】：Jquery mousedown + mousemovejQuery mousedown + mousemove
【发布时间】：2009-10-15 13:45:27
【问题描述】：

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

【问题讨论】：

我今天遇到了这个问题。显然，有了 Firefox，我们就完蛋了？ document.mouseup 也不起作用。

标签： jquery

【解决方案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.

【讨论】：

问题是鼠标拖了之后好像没有触发mouseup，然后点击没有重置
多么有趣 - 我没有意识到这一点。我刚刚在FF3.5上测试过，和你说的一样。你用的是哪个浏览器？
是的，它的火狐。而且情况会变得更糟。我正在使用从 iframe 拖放到父级的操作。所以我想我还需要在父级中使用 mouseup 触发器，这将在 iframe 中触发 mouseup。我试试这个
我无法让我的 iframe 或父母赶上 onmouseup.. 奇怪
@Persmon 3 年太迟了，但是如果你想让 mouseup 在 iframe 上工作（并且属于同一个域），你所要做的就是用 $('iframe') 替换 $(document) .map((i, e) => e.contentWindow.document).add(document)

【解决方案2】：

使用以下代码

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

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

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

【讨论】：

这是完美的。我一直在到处寻找这个。
非常感谢！我见过的解决此类问题的最短解决方案！

【解决方案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')
    });
});

【讨论】：

【解决方案4】：

这可能有助于解决这种情况...处理 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

【讨论】：

【解决方案5】：

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?

【讨论】：

【解决方案6】：

对于使用动态加载的内容来此线程寻找 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 中）。

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

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

【讨论】：

【解决方案9】：

setTimeout(function(){

  var radiobox_state;
  $('input[type="radio"]').mousedown(function(){
    radiobox_state=this.checked
  })

  $('input[type="radio"]').click(function(){
    if(radiobox_state){
      $(this).prop("checked",false);
    }
  })
  
}, 500);

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案10】：

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


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

【讨论】：

此脚本仅在鼠标按下+鼠标移动时触发
为什么在同一个代码中同时使用on 和bind？它们是等价的——你应该选择其中一个。
UpTheCreek，我使用了绑定，以便在鼠标启动时解除绑定。你可能是对的，我本可以使用 .on 和 .off 而不是 .bind 和 .unbind

【解决方案11】：

e.preventDefault();

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

【讨论】：

【解决方案12】：

我们像这样使用 $.bind()：

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

这意味着无论是 mousemove 还是 mousedown 触发，函数都会执行。所以在函数中，我们仍然可以通过 event.which 等于 1 来检查是否按下了左键。所以代码应该是这样的：

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

【讨论】：

【解决方案13】：

可能是：

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

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

【讨论】：

好的，所以 $('input').bind('mousedown mousemove', fn);只会在按下鼠标并移动时触发？我认为如果按下鼠标或移动鼠标，这会触发。