javascript how to continuously move element on mousedown and stop moving on mouseup

Question

Can anyone help me accomplish the following? Thanks in advance!

Using JavaScript (I don't want to use JQuery), on mouse down how do I keep moving an element to either left if clicked on the id navLinkLeft or keep moving right if clicked on the id navLinkRight, and stop when mouse up.

<nav>
 <a href="#" id="navLinkLeft">Link Left</a>
 <div id="navLinks">Navigation Links to Be Moved</div>
 <a href="#" id="navLinkRight">Link Right</a>
</nav> 

I've added event listeners but I'm not sure how to keep moving the elements. The goal is to keep moving the id navLinks to left or right when mouse down and stop when mouse up.

 <script>
    var navLinkLeft = document.getElementById("navLinkLeft");
    navLinkLeft.addEventListener("mousedown", moveLeft, false);
    navLinkLeft.addEventListener("mouseup", stopMovingLeft, false);
    var navLinkRight = document.getElementById("navLinkRight");
    navLinkRight.addEventListener("mousedown", moveRight, false);
    navLinkRight.addEventListener("mouseup", stopMovingRight, false);

    function moveLeft(){
        var navLinks = document.getElementById("navLinks");
        var x = -50;
            navLinks.style.left += x + "px";
        }

    function stopMovingLeft(){

    }

    function moveRight(){
        var navLinks = document.getElementById("navLinks");
        var x = +50;
            navLinks.style.left += x + "px";
    }

    function stopMovingRight(){

    }
</script>

Answer 1

Create a variable in JavaScript that is true when you are hovering over the button, and vice versa, and then base the movement of that variable. I think there might be an event for this to, but using a variable might give you a little bit more flexibility. Like others have said, you could cause an if statement to be based on this in a setInterval(). SetInterval is the same method that I use to update the frames in my canvas app.

Not sure what you are doing, but canvas is sweet for things like this, but might not be suitable for what you are doing. (Good for things where flash might be useful.)

Example code: http://jsfiddle.net/otqr7ur5/26/ Its a bit messy, (alright, alot) because I havn't used javascript in awhile, but this demo works. I only implemented moving left (with the right button lol) but it has what you need, and I am sure you can edit it to use it.

Basic Thoughts:

function updatePos() { //Updates the position every 200 ms

if (holdingLeft === true) {
    currentX = currentX+10;
    navLinks.style.right = currentX + 'px';
    console.log(navLinks.style.right);
}

---

holdingLeft = true; //In the event, triggers it to move
holdingLeft = false; //Stops it moving right.

---

setInterval(function () {  //Messy way of making update pos run every 200ms. I dont know why I put it in a function.... you can clean.
    updatePos();
  }
}, 200);