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. #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,224
    Thanks
    36
    Thanked 167 Times in 167 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 03: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
  •