Alex Alex - 3 months ago 8
Javascript Question

How to track mousepress event?

I have a draggable bar and it works well. https://jsfiddle.net/c2cqxcf8/2/
But if we drag it to the right border then up the mouse and try to drag it beyond the bar, crossing closest button with mouse and get the mouse back within bar, we see that mousemove event that supposed to be unbinded with help of mouseup event is not unbined and mousemove works for some reason. So i tried to track when mouse is pressed ,that is the only thing letting mousemove work but that code doesn't solve my problem so far. I count on your help, guys, i need to detect when mouse is pressed and only in that case let mousemove work and move my bar. Thanks!

This is JS and the entire document you can see in link above.

var info;
var dest;
var result;
var between = 0;
var mouseDown = 0;
$('.bar-button').on('mousedown', function(event){
mouseDown = 1;
info = event.pageX;
if(mouseDown == 1) {
$(document).on('mousemove', function(e) {
dest = e.pageX - info + between;
if(dest >= 0 && dest <= 240) {
result = dest;
}
$('.bar-button').css('left', result + 'px');
})
}
$(document).on('mouseup', function(){
mouseDown = 0;
$(document).unbind();
between = result;
})
})

Answer

Is it what you mean?

if(dest >= 0 && dest <= 240) {
    result = dest;
}else $(document).unbind('mousemove');

I added else, wo when mouse is out of bar, mousemove vent is unbinded

Comments