JQuery mousedown + mousemove

Ответ 1

Обновлено:

Итак, похоже, если ваша мышь больше не находится над элементом, на котором привязана onmouseup, он не увидит событие mouse up. Имеет смысл, когда вы останавливаетесь и думаете об этом, но когда событие 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), просто пометьте "edit" в конце URL-адреса. http://jsbin.com/icuso/edit.

Ответ 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

Для всех, кто пришел в этот поток в поисках общей помощи для jQuery mouseup, mousemove и mousedown, используя динамически загружаемое содержимое, я обнаружил (по крайней мере, в хроме) эту модификацию Matt 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 к динамически создаваемому элементу, это должно работать (опять же, по крайней мере в хроме).

Ответ 5

Это может помочь в ситуации... есть некоторые трудности при работе с iframe. В настоящее время я работаю над проектом, нуждающимся в изменении размеров элементов в iframe.

Скажем, у вас есть 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

Ответ 6

Ответ можно найти в другой теме SO:
Firefox перетаскивает div, как будто это было изображение

Вам нужно вернуть false из обработчиков событий, чтобы предотвратить действие по умолчанию

Как только я вернул false в обработчики событий, он работал как прелесть.

Ответ 7

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?

Ответ 8

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

Ответ 9

e.preventDefault();

и e - обработчик события, который вы передаете функции

Ответ 10

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


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

Ответ 11

мы используем $.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
        }
    });

Ответ 12

Может быть:

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

но по какой-то причине я думаю, что вы уже пробовали это.