Page 1 of 1
[SOLVED] Getting onmousedown to work continously
Posted: Fri Sep 02, 2005 6:44 am
by anjanesh
Code: Select all
<html>
<head>
<script type="text/javascript">
function foo()
{
var t1 = document.getElementById("t1");
t1.innerHTML = t1.innerHTML + "more<br/>";
}
</script>
</head>
<body>
<input value="Hit" type="button" onmousedown="foo()"/>
<div id="t1">test<br/></div>
</body>
</html>
Only when I keep
clicking the mouse button will the text
more get added to the DIV element. I want it added when the mouse is pressed down all the time.
In the above code onmousedown has the same effect as onclick.
What am I doing wrong here ?
Thanks
Posted: Fri Sep 02, 2005 7:23 am
by n00b Saibot
anjanesh wrote:In the above code onmousedown has the same effect as onclick.
What am I doing wrong here ?
You are doing nothing wrong. The event is fired once for every mouse-click. hence you get only one increment per click.
My suggestion is use a counter to record state of mouse. if its down then increment 'more' every 1 sec or any other pre-defined interval. if mouse state changes to up then stop adding. but you will have to have an interval loop checking for state of mouse and incrementing when required.
Posted: Fri Sep 02, 2005 7:42 am
by anjanesh
Thanks. I got it working like this :
Code: Select all
<html>
<head>
<script type="text/javascript">
var isMouseDown = false;
function foo()
{
self.setTimeout("foo1()",100);
}
function foo1()
{
if (isMouseDown == false) return;
var t1 = document.getElementById("t1");
t1.innerHTML = t1.innerHTML + "more<br/>";
foo();
}
</script>
</head>
<body>
<input value="Hit" type="button" onmousedown="isMouseDown = true,foo()" onmouseup="isMouseDown = false"/>
<div id="t1">test<br/></div>
</body>
</html>
Posted: Fri Sep 02, 2005 11:27 pm
by anjanesh
Is there a method to know 'who' called foo() ? foo1() or from onmousedown ?
Code: Select all
<html>
<head>
<script type="text/javascript">
var isMouseDown = false;
function foo()
{
// I need to know here who is calling foo() - foo1() or from onmousedown
self.setTimeout("foo1()",100);
}
function foo1()
{
if (isMouseDown == false) return;
var t1 = document.getElementById("t1");
t1.innerHTML = t1.innerHTML + "more<br/>";
foo();
}
</script>
</head>
<body>
<input value="Hit" type="button" onmousedown="isMouseDown = true,foo()" onmouseup="isMouseDown = false"/>
<div id="t1">test<br/></div>
</body>
</html>
Posted: Sat Sep 03, 2005 12:02 am
by feyd
from a quick search on google to make sure (call stack javascript) it would confirm my suspicion that there is no exposed call-stack for a script to look at, unlike php's..

Posted: Sat Sep 03, 2005 12:48 am
by anjanesh
Thanks for the info.
Guess I'll have to do
Code: Select all
onmousedown="isMouseDown = true,foo(true)"
.
.
.
function foo(isFromMouseDown)
{
if (isFromMouseDown == true) {...}
self.setTimeout("foo1()",100);
}
Posted: Sat Sep 03, 2005 12:59 am
by n00b Saibot
anjanesh wrote:Is there a method to know 'who' called foo() ? foo1() or from onmousedown?
A way would be to pass the info directly.
Code: Select all
<html>
<head>
<script type="text/javascript">
var isMouseDown = false;
function foo(obj)
{
alert("I was called by -> "+obj.id);
self.setTimeout("foo1()",100);
}
function foo1()
{
if (isMouseDown == false) return;
var t1 = document.getElementById("t1");
t1.innerHTML = t1.innerHTML + "more<br/>";
foo();
}
</script>
</head>
<body>
<input value="Hit" type="button" id="HitButton" onmousedown="isMouseDown = true, foo(this)" onmouseup="isMouseDown = false"/>
<div id="t1">test<br/></div>
</body>
</html>
Posted: Sat Sep 03, 2005 1:08 am
by anjanesh
Ah..yes.
foo(); in function foo1() also has to be change to foo(this);
In foo if I give document.getElementById("t2").innerHTML = obj;
If foo() is called by foo1() then its [object Window], if its from [object HTMLInputElement]
Unfortunately if both calls are from 2 functions says foo1() and foo2() then both return [object Window]. obj.id will return undefined because its not from an Input Element.
Posted: Sat Sep 03, 2005 1:30 am
by n00b Saibot
That problem is because you chose to use two functions for a simple matter. I didn't mean to give you a working example, but just a push in right direction

Well here is the modified perfectly-working version...
Code: Select all
<html>
<head>
<script type="text/javascript">
var isMouseDown = false;
var callingObj;
function foo(obj)
{
if(obj != '') callingObj = obj;
document.getElementById("caller").innerHTML = callingObj.id;
if (isMouseDown)
{
var t1 = document.getElementById("t1");
t1.innerHTML = t1.innerHTML + "more<br/>";
setTimeout("foo('')", 100);
}
}
</script>
</head>
<body>
Caller : <b><span id="caller">none</span></b><br />
<input value="Hit It" type="button" id="Hit-Button"
onmousedown="isMouseDown = true, foo(this)" onmouseup="isMouseDown =
false"/>
<input value="Hit It Hard" type="button" id="Hit-Hard-Button"
onmousedown="isMouseDown = true, foo(this)" onmouseup="isMouseDown =
false"/>
<div id="t1">test<br/></div>
</body>
</html>