[SOLVED] Getting onmousedown to work continously

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

[SOLVED] Getting onmousedown to work continously

Post 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
Last edited by anjanesh on Fri Sep 02, 2005 11:49 am, edited 1 time in total.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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.
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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>
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.. ;)
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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);
 }
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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>
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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>
Post Reply