CODEWITHSUNDEEP
jquerymousedown
zklim
zklim

Reputation: 525

jQuery mousedown not updating

I have this that I've been messing with:

$('.container').mousedown(function(e) {
    $('.coords').text(e.pageX + ' : ' + e.pageY);
});
.container {
    width: 300px;
    height: 300px;
    background-color: white;
    border: 2px solid black;
    margin: 0 auto;
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
</div>
<div>Coords: <p class='coords'> </p> </div>

I'm trying to program it such that when you click inside the box and move the mouse around the coordinates will also change - then if you leave the box, it's not updated. Right now, the coordinates will only change when you let go of the mouse button and then click again. Help?

Upvotes: 0

Views: 54

Answers (3)

kel
kel

Reputation: 1597

You need to create more that a mousedown function. You need to use mousemove as well. Here are the docs on that, https://api.jquery.com/mousemove/

You could do something like this (fiddle).

var mouse_clicked;

$('.container').mousedown(function(e) {
    mouse_clicked = true;
});

$('.container').mouseup(function(e) {
    mouse_clicked = false;
});

$('.container').mouseleave(function(e) {
    mouse_clicked = false;
});

$('.container').mousemove(function(e) {
  if (mouse_clicked) {
    $('.coords').text(e.pageX + ' : ' + e.pageY);
  }
});

Here is a different way of doing it that looks a little cleaner

var mouse_clicked;
$('.container').on({
  'mousedown': function() {
    mouse_clicked = true;
  },
  'mouseup': function() {
    mouse_clicked = false;
  },
  'mouseleave': function() {
    mouse_clicked = false;
  },
  'mousemove': function(e) {
    if (mouse_clicked) {
      $('.coords').text(e.pageX + ' : ' + e.pageY);
    }
  }
});

Upvotes: 2

Jonathan
Jonathan

Reputation: 9151

I would track it like this.

var mousePosition = { x: 0, y: 0};
var BUTTONS = { LEFT: 0, MIDDLE: 1, RIGHT: 2};
var mouseDown = [];
var mouseDownCount = 0;

var buttonInfo = document.getElementById("buttons");
var posInfo = document.getElementById("pos");

// Track mouse all the time.
document.addEventListener('mousemove', function storeMouse(event) {
    mousePosition = {
        x: event.clientX,
        y: event.clientY
    };
});

document.addEventListener('mousedown', function (event) {
    mouseDown[event.button] = true;
    ++mouseDownCount;
});
document.addEventListener('mouseup', function (event) {
    mouseDown[event.button] = false;
    --mouseDownCount;
});

function checkMouseStuff() {
    var buttons = [];

    if (mouseDownCount) {
        for (var i = 0; i < mouseDown.length; ++i) {
            if (mouseDown[i]) {
                buttons.push("Button: " + i);
            }
        }
    }

    buttonInfo.textContent = buttons.join(", ");
    posInfo.textContent = mousePosition.x + " : " + mousePosition.y;
}

window.setInterval(checkMouseStuff, 10);
<p id="pos"></p>
<p id="buttons"></p>

Upvotes: 0

garryp
garryp

Reputation: 5766

One easy approach is to use a switch that detects when the mouse is held down. This example works on document but could easily be adapted for an element:

var isDown = false;
$(document).mousedown(function(e) {
   isDown = true;
});

$(document).mousemove(function(e) {
    if(isDown) {
        console.log(e.pageX + ',' + e.pageY);
    }
});

$(document).mouseup(function(e) {
   isDown = false;
});

http://jsfiddle.net/kynwywss/1/

Upvotes: 0

Related Questions