/    Sign up×
Community /Pin to ProfileBookmark

Mouse event Firefox

Copy linkTweet thisAlerts:
Apr 30.2005

Hi all,

I am using Firefox and embedding Javascript in html. I understand that we can use mouse events by coding them in the body of html (by creating a button or anything and by adding in the events in the <img> tag).

[code]
<input id=”StdDev Value” name=”StdDevButton” type=”button” value=”Standard Deviation Value” onclick=”readStdDevValue()”/>

But what if I need to add some mouse events without creating any img or button? What I mean is – when the mouse cursor is in certain coordinates (eg. in certain areas on an image), then if the user left click, something will happen.

Could anyone tell me how could I do it, please?
Thanks in advance.

seanky

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsApr 30.2005 — [code=php]

<script language="JavaScript" type="text/javascript">
<!--

document.onclick=function(){ MyFunction(); }
//-->
</script>

[/code]
Copy linkTweet thisAlerts:
@masanthaApr 30.2005 — Thanks Vic... Actually I already tried this method:

My Code:

<html>

<head>

<script language="javascript">

document.addEventListener("mousemove", calculatePos, false);

function init() {

}

function getMousePosition(event) {

var posX = 0;
var posY = 0;

posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;

var position = new Array(2);
position[0] = posX;
position[1] = posY;
return position;
}

function calculatePos (event) {

var mousePosition = getMousePosition(event);

checkAreaIn(mousePosition);

}

function checkAreaIn(mousePosition) {

var mx = mousePosition[0];

var my = mousePosition[1];

window.status = "X= " + mx + " Y= " + my;

if (mx > 20 && mx < 80 && my > 40 && my < 100) {
document.onclick = pop();
} else {
}
}

function pop() {

alert("working!!!");

}

</script>

</head>

<body onload="init();" onClick="return false">

</body>

</html>

But the alert box will pop up when the mouse cursor is in that area even though I don't there is no mouse clicking.... Could you let me know where is the problem in my code, please?

THanks, again.
Copy linkTweet thisAlerts:
@7studApr 30.2005 — But what if I need to add some mouse events without creating any img or button? What I mean is - when the mouse cursor is in certain coordinates (eg. in certain areas on an image),[/QUOTE]You can get the onclick event to fire when the user clicks anywhere on the page by using:
window.onload=function() //have to wait until the page loads and the document exists
{
document.onclick = somfunc; //no '()'
};

Then, in the function somefunc() you can decide what to do with that click. You can access the event object to see what the coordinates are of the click, and based on the coordinates, you take some action or do nothing. There are cross browser issues you have to deal with, so it's not exactly a beginner script, but it certainly isn't beyond reach. You'll have to do some research or get a book--or hire a web programmer.
Copy linkTweet thisAlerts:
@masanthaApr 30.2005 — Oppppsss....... sorry vic....

I got it!!!! THank a lot!!!! Sorry for my carelessness and ignorance.

Thanks, again.
Copy linkTweet thisAlerts:
@7studApr 30.2005 — addEventListener("mousemove", calculatePos, false);[/QUOTE]
not cross browser, so don't use it.

<body onload="init();" onClick="return false">[/QUOTE]
don't ever put events in the body tag.

if (mx > 20 && mx < 80 && my > 40 && my < 100) {

document.onclick =[color=red] pop();[/color][/QUOTE]
You are executing pop() immediately.
Copy linkTweet thisAlerts:
@masanthaApr 30.2005 — Hi 7stud,

Thanks for your advices. As for the first comment, what do you mean it is not cross browser and why can't I use it? I am very new in programming, therefore, I know sometimes the code seems to be working, but actually it is the wrong way to do it.

As for the last one, I modify my code to:

if (mx > 20 && mx < 80 && my > 40 && my < 100) {
document.onclick = function() { pop();}
} else {
}

so it is working now....

Thanks, again...
Copy linkTweet thisAlerts:
@felgallMay 01.2005 — addEventListener is a call to an ActiveX control that is supported only by Internet Explorer - Netscape, Mozilla, Firefox, Opera, Safari, Konquerer, etc do not understand the command and will therefore not perform the required function. If you stick with standard Javascript then your code should work the same in most browsers.
Copy linkTweet thisAlerts:
@seankyauthorMay 01.2005 — Hi, i thought it is working. But then I realize it is actually now.

My Code:

function checkAreaIn(mousePosition) {

var mx = mousePosition[0];

var my = mousePosition[1];

window.status = "X= " + mx + " Y= " + my;

if (mx > 20 && mx < 80 && my > 40 && my < 100) {
document.onclick = function() { pop();}
} else {
}
}

function pop() {

alert("working!!!");

}


When i first load the page, there is nothing happen when I click outside that area. Then when I click inside that area, the alert box popping up. After that, no matter where I click, the alert box keep popping up (whether it is inside the area or not).

Could anyone tell me what is the problem, please?

Thanks in advance.
Copy linkTweet thisAlerts:
@javafr3akMay 02.2005 — [URL='http://www.gangstawar.com/index.php?act=speclink&speclink=i55b122357']If you ever need help this is a good website[/URL]
Copy linkTweet thisAlerts:
@seankyauthorMay 02.2005 — Hi all, I tried my best to solve my recent problem. But I still can't figure out why after I click on that particular area, no matter where I click after that, it seems to dominating the whole area and keep popping out the alert box.

Could anyone please help me on this?

Thanks a lot,
Copy linkTweet thisAlerts:
@vwphillipsMay 02.2005 — post you complete code
Copy linkTweet thisAlerts:
@seankyauthorMay 02.2005 — Hi Vic, this is my test file for this mouse click event.

my Code:

<html>

<head>

<script language="javascript">

document.addEventListener("mousemove", calculatePos, false);

function init() {

}

function getMousePosition(event) {

var posX = 0;
var posY = 0;

posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;

var position = new Array(2);
position[0] = posX;
position[1] = posY;

return position;
}

function calculatePos (event) {

var mousePosition = getMousePosition(event);

checkAreaIn(mousePosition);

}

function checkAreaIn(mousePosition) {

var mx = mousePosition[0];

var my = mousePosition[1];

window.status = "X= " + mx + " Y= " + my;

if (mx > 20 && mx < 80 && my > 40 && my < 100) {
//document.onclick = alert("working!!!");
document.onclick = function() { pop();}
} else {
}
}

function pop() {

alert("working!!!");

}

</script>

</head>

<body onload="init();">

</body>

</html>

THanks....
×

Success!

Help @seanky spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...