onmousedown event is not giving continuous event?

Question

I want user mouse position while the user is holding down the mouse button continuously?

I try to do the with following code:

$(div).mousedown(function(eventObj){
    console.log(eventObj.clientX);  
});

but this code is giving mouse position only once when the user presses the mouse button.

Answer 1

Here's a way of simulating the mousedrag event. Basically, on mouseDown the isDragging boolean is set to true, then in the mouseMove I check to see if isDragging, and if so, do something. On mouseUp, I set the isDragging back to false. Easiest way I've found.

var isDragging = false;
/***
 * Tracking the dragging -- on mousedown, I set
 *   the isDragging to true, then I check that for
 *   the mousemove on this element.
 *   - On mouseup, I reset the isDragging to false,
 *     thus ending the simulated drag event.
 ***/
$(".slide-control").on("mousemove", function(evt) {
  if (isDragging) {
    console.log(evt.pageX+", "+evt.pageY);
  }
}).on("mouseup", function() {
  // When the drag event has ended, set the toggle off.
  isDragging = false;
}).on("mousedown", function() {
  isDragging = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-control"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.</p>

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus.</p></div>

Another option, a little late to the ballgame, is to create your own custom event. This would allow you to actually use something like: $(".my-custom-el").on("mousedrag", function(){...});

To do this, simply define the trigger for this custom event, like so:

/****
 * Here I'm using the custom event I've created.
 *   As there are multiple elements side-by-side, 
 *   depending on which event triggers causes a
 *   different result. Change the downEvt to the
 *   dragEvt in the following function to see what
 *   happens.
 ****/
$(".sub-pane").on("mousedrag", function(evt){
  console.log($(this).prop("id")+", dragging");
});


/*****
 * This function is a custom event, could be placed
 *  in a utility library someplace. It simply listens
 *  at the document level for a combination of mouse
 *  down and mouse move, and when that occurs, it
 *  triggers a mousedrag event. Now, the event target
 *  used to trigger the event can be either the 
 *  mousedown element OR the mousemove element. 
 *  - Using the downEvt.target to trigger the event
 *    will continue to trigger the event ONLY on its
 *    starting element, even if you drag over another
 *    element.
 *  - using the dragEvt.target to trigger will 
 *    use the element you're currently over as the
 *    triggered element.
 *****/
$(document).on("mousedown", function(downEvt){
  $(document).on("mousemove", function(moveEvt){
    return $(downEvt.target).trigger("mousedrag");
  });
});

.nav-pane {
  width: 15%;
  background-color: #ccc;
  float: left;
}
.content-pane {
  width: 80%;
  background-color: #aaa;
  float: right;
  padding: 5px;
}
.nav-pane ul {
  list-style-type: none;
  position: relative;
  left: -25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
  <div id="pane-one" class="sub-pane nav-pane">
    <ul>
      <li>first</li>
      <li>second</li>
      <li>third</li>
    </ul>
  </div>
  <div id="pane-two" class="sub-pane content-pane">
    <p>Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed,
      convallis at tellus.</p>

    <p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet
      et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit.</p>
  </div>
</div>

Answer 2

The easiest way to accomplish this is to put the mousemove event into the mousedown event so that when the mousedown event triggers the mousemove event that fires continously also fires. This allows the mouse location to be tracked when the mouse button is held down. The mouseup event was added so that on release it stops tracking the mouse location from the mousemove event.

https://jsfiddle.net/q37z3g94/

$(


"#test").mousedown(function(eventObj) {
  $("#test").mousemove(function(event) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    $("span:first").text("( event.pageX, event.pageY ) : " + pageCoords);
    $("span:last").text("( event.clientX, event.clientY ) : " + clientCoords);
  });
});

$("#test").mouseup(function(eventObj) {
  $("#test").unbind('mousemove');
});

Answer 3

For example, you could use the setInterval function to repeatedly call a function while the mouse button is down, and then use clearInterval to stop when the mouse button is released. Here is an example (using jQuery):

var interval;
$("#div").mousedown(function(eventObj) {
    interval = setInterval(performWhileMouseDown(eventObj), 100);
}).mouseup(function() {
    clearInterval(interval);  
});
function performWhileMouseDown(eventObj) {
    console.log(eventObj.clientX);
}

Answer 4

You're probably looking for the onMouseMove event. What you should do is onMouseDown start listening to the onMouseMove event with what you want done, then onMouseUp stop listening. Example code would look like:

$(div).mousedown(function(eventObj){
    $(div).mousemove(function(evt){
        console.log(''+evt.pageX+', '+evt.pageY);
    });  
});
$(div).mouseup(function(eventObj){
    $(div).off( "mousemove" );
});

Answer 5

You could use mousedown and mouseup to set a flag - maybe isMouseDown, and then you can use clientX and clientY with that info where you need it