CODEWITHSUNDEEP
javascriptd3.jsmouseeventdom-eventsonmousedown
myriam BN
myriam BN

Reputation: 29

While mousedown JS

I'm trying to run a function while mousedown but for the life of me I can't get it to work while holding down but everything works by just clicking. I'm trying to change color of countries on a map as I hold down. Here's my code: 

    var int;
    var mouseStillDown = false;

      function mousedown(geography) 
      {     console.log('mousedown '+mousedownID);
             mouseStillDown = true;
          int = setInterval( performWhileMouseDown(geography), 100);
      }



    function mouseup() 
    {
        clearInterval(int);  
        mouseStillDown = false;
    }

     function mouseout() 
    {
        clearInterval(int);  
    }

      function performWhileMouseDown(geography)
       {
             if (!mouseStillDown)
              {console.log('error');}

            if (mouseStillDown) {
           if(data[geography.id])
            {
              data[geography.id] ++;
            }else
              {
                data[geography.id] = 1;
              }
            var m = {};                                        
            m[geography.id] = color(data[geography.id]);
            map.updateChoropleth(m);
              }

            /* if (mouseStillDown)
              { setInterval(performWhileMouseDown(geography), 100); }*/
      }

Upvotes: 1

Views: 1826

Answers (3)

mdre
mdre

Reputation: 81

The two conditions for your event are that the code executes every time there is an update in mouse position AND the mouse button is pressed.

Addressing the first part can be done with the 'mousemove' event, which fires when the mouse is moved over the element.

The second filter can be solved, by checking the mouse event, on if the button is pressed. If not, we don't execute the following code.

window.addEventListener('mousemove', function() { // Attach listener
  if (event.buttons == 0)  // Check event for button
    return;                // Button not pressed, exit
  
  // perform while mouse is moving
})

Upvotes: -1

myriam BN
myriam BN

Reputation: 29

here's what worked for me 

 var timeout ;
function mouseDown(geography){

    timeout = setInterval( function(){


            if(data[geography.id]){

              data[geography.id] ++;
            }else{
              data[geography.id] = 1;
            }
            var m = {};                                        
            m[geography.id] = color(data[geography.id]);
            map.updateChoropleth(m);}, 100);

    return false;
}


function mouseUp(geography){

clearInterval(timeout);
    return false;
}

Upvotes: 0

hampusohlsson
hampusohlsson

Reputation: 10219

You could try to use mousemove instead, mousedown will only fire once.

var mouseDown = false;
window.addEventListener('mousedown', function() { mouseDown = true })
window.addEventListener('mouseup', function() { mouseDown = false })
window.addEventListener('mousemove', function() { 
  if (!mouseDown) {
    return;
  }
  // perform while mouse is moving
})

Upvotes: 2

Related Questions