Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    NW Iowa
    Posts
    185
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Javascript - Repeat Action on Hold Mouse Down

    I've been researching this morning on how to repeat a function if the mouse button is held down. As far as I can tell, you have to detect onMouseDown and set a variable, then clear the variable onMouseUp. During this you run a loop to check the variable, and if var_mousedown = True, then repeat.

    Since I really (and I mean really) suck at JavaScript, I need some assistance. I have the following onClick event that I'd like to continue to trigger as long as the mouse is held down: onClick="PanXY(-50,0);".

    The PanYX function is here:
    Code:
    function PanXY(x,y)
          {
             map.Pan(x,y);
          }
    I'd like to expand on something like this: (found here: http://stackoverflow.com/questions/3...on-down/322827)
    Code:
    var mousedownTimeout,    
    	mousedown = 0;
    
    document.body.onmousedown = function() {  
    	mousedown = 0;   
    	window.clearInterval(mousedownTimeout);  
    	mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
    }
    
    document.body.onmouseup = function() {  
    	mousedown = 0;  
    	window.clearInterval(mousedownTimeout);
    }
    
    if (mousedown >= 500) {  
    
    function PanXY(x,y)
          {
             map.Pan(x,y);
          }
    
    }
    However, I'm not sure how this would actually work. So if the mouse is held down while calling onclick the "PanXY" function, will it actually repeat with the values given?

    Thanks,
    Matt

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    You can do something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <script type="text/javascript">
    // <![CDATA[
    
    function action()
    	{
    	var colors = ["#ff0000","#00ff00","#0000ff","#ffff00","#00ffff","#ff00ff","#000000","#ffffff"];
    	current_color_index = typeof(current_color_index) == "undefined" ? 0 : (current_color_index+1)%colors.length;
    	document.getElementsByTagName("body")[0].style.backgroundColor = colors[current_color_index];
    	}
    
    function beginAction()
    	{
    	action();
    	action_timeout = setInterval("action()",500);
    	}
    
    function endAction()
    	{
    	if (typeof(action_timeout) != "undefined") clearTimeout(action_timeout);
    	}
    
    window.onload = function()
    	{
    	document.getElementsByTagName("body")[0].onmousedown = beginAction;
    	document.getElementsByTagName("body")[0].onmouseup = endAction;
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <div style="height:800px;">click somewhere</div>
    
    </body>
    </html>
    You can change the action function to something like:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <script type="text/javascript">
    // <![CDATA[
    
    function action()
    	{
    	map.Pan(-50,0);
    	}
    
    function beginAction()
    	{
    	action();
    	action_timeout = setInterval("action()",500);
    	}
    
    function endAction()
    	{
    	if (typeof(action_timeout) != "undefined") clearTimeout(action_timeout);
    	}
    
    window.onload = function()
    	{
    	document.getElementsByTagName("body")[0].onmousedown = beginAction;
    	document.getElementsByTagName("body")[0].onmouseup = endAction;
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <div style="height:800px;">click somewhere</div>
    
    </body>
    </html>
    Last edited by itsallkizza; 05-12-2009 at 04:51 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •