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>