...

View Full Version : Javascript - Repeat Action on Hold Mouse Down



mattboy_slim
05-12-2009, 03:32 PM
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:

function PanXY(x,y)
{
map.Pan(x,y);
}

I'd like to expand on something like this: (found here: http://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down/322827)


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

itsallkizza
05-12-2009, 03:47 PM
You can do something like this:


<!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:


<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum