как реализовать mousemove при нажатии mouseDown js

Я должен реализовать событие перемещения мыши только при нажатии кнопки мыши.

Мне нужно выполнить «OK Moved» только при нажатии и перемещении мыши.

я использовал этот код

 $(".floor").mousedown(function() {
  $(".floor").bind('mouseover',function(){
      alert("OK Moved!");
  });
})
.mouseup(function() {
 $(".floor").unbind('mouseover');
});

javascript jquery mousemove mouseevent mousedown
person M1M6    schedule 13.06.2015    source источник

Ответы (2)


arrow_upward
22
arrow_downward

Используйте событие mousemove.

Из mousemove и mouseover документы jquery:

Событие mousemove отправляется элементу, когда указатель мыши перемещается внутри элемента.

Событие mouseover отправляется элементу, когда указатель мыши входит в элемент.

Пример: (проверьте вывод консоли)

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

https://jsfiddle.net/n4820hsh/

person Tobías    schedule 13.06.2015
comment
когда вы щелкаете в поле в первый раз и перемещаете мышь, это работает хорошо, но когда вы снова перемещаете мышь без нажатия кнопки, это также работает! вот от чего я страдаю : 3 . мне нужно работать только при нажатии и перемещении мыши. - person M1M6; 13.06.2015
comment
отредактировано: нужно отвязать также, когда мы выходим из коробки. Теперь это должно работать только тогда, когда вы нажимаете мышью внутри коробки и перемещаетесь внутри. - person Tobías; 13.06.2015

arrow_upward
5
arrow_downward

В чистом javascript вы можете добиться этого с помощью

function mouseMoveWhilstDown(target, whileMove) {
    var endMove = function () {
        window.removeEventListener('mousemove', whileMove);
        window.removeEventListener('mouseup', endMove);
    };

    target.addEventListener('mousedown', function (event) {
        event.stopPropagation(); // remove if you do want it to propagate ..
        window.addEventListener('mousemove', whileMove);
        window.addEventListener('mouseup', endMove);   
    });
}

Затем, используя функцию по строкам

mouseMoveWhilstDown(
    document.getElementById('move'),
    function (event) { console.log(event); }
);

(примечание: в приведенном выше примере вам не нужна функция — вы могли бы назвать ее как mouseMoveWhilstDown(document.getElementById('move'), console.log), но вы можете захотеть сделать с ней что-то кроме вывода на консоль!)

person Algy Taylor    schedule 28.03.2019