Mouse X en Y
heb dit gemaakt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function displaycoordNS(){
document.getElementById('divCoord').innerHTML = e.clientX " : " e.clientY;
}
</script></head>
<body onmousemove="displaycoordNS()">
<div id="divCoord"></div>
</body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function displaycoordNS(){
document.getElementById('divCoord').innerHTML = e.clientX " : " e.clientY;
}
</script></head>
<body onmousemove="displaycoordNS()">
<div id="divCoord"></div>
</body></html>
Maar werkt het werkt niet, weet iemand waarom ?!
Waar staat die e voor? probeer eens document.clientX " : " document.clientY;
Ps wat voor error krijg je? (kun je bekijken in de Firebug Addon in Firefox of fout console van Firefox (ctrl+schift+j))
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function displaycoordNS(){
document.getElementById('divCoord').innerHTML = document.clientX+":"+document.clientY;
}
</script></head>
<body onmousemove="displaycoordNS()">
<div id="divCoord"></div>
</body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function displaycoordNS(){
document.getElementById('divCoord').innerHTML = document.clientX+":"+document.clientY;
}
</script></head>
<body onmousemove="displaycoordNS()">
<div id="divCoord"></div>
</body></html>
Maar als ik mijn muis beweeg, staat er undifined:undifined
FireBug zegt trouwens niets.
Gewijzigd op 26/07/2010 11:08:45 door - Raoul -
http://www.quirksmode.org/js/events_properties.html#position
Zie geheel quirksmode voor hoe om te gaan met events en muis.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
Maar als ik de functie wil aanroepen, wat moet ik dan doen met die 'e' ?
Let op: In IE moet je event gebruiken i.p.v. e. Dus het is handig om dit erbij te zetten:
Code (php)
1
2
3
2
3
if (e === undefined) {
e = event;
}
e = event;
}
Gewijzigd op 26/07/2010 11:31:21 door Mark L
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function doSomething(e) {
var posx = 0;
var posy = 0;
if (e === undefined) {
e = event;
}
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
document.getElementById('divCoord').innerHTML = 'Y= '+posy+' X= '+posx+'.';
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
document.getElementById('divCoord').innerHTML = 'Y= '+posy+' X= '+posx+'.';
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
</script></head>
<body onmousemove="doSomething();">
<div id="divCoord"></div>
</body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function doSomething(e) {
var posx = 0;
var posy = 0;
if (e === undefined) {
e = event;
}
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
document.getElementById('divCoord').innerHTML = 'Y= '+posy+' X= '+posx+'.';
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
document.getElementById('divCoord').innerHTML = 'Y= '+posy+' X= '+posx+'.';
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
</script></head>
<body onmousemove="doSomething();">
<div id="divCoord"></div>
</body></html>
En Firebug zegt: event is not defined
Gebruik eens addEventListener/attachEvent op gewoon direct window.onmousemove=doSomething;
Je hebt al een if(!e)... dus je kunt if(e===undefined){e=event} wel weghalen.
Terwijl alles nu klopt :s
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
document.getElementById('divCoord').innerHTML = 'Y= '+posy+' X= '+posx+'.';
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
document.getElementById('divCoord').innerHTML = 'Y= '+posy+' X= '+posx+'.';
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
window.onmousemove=doSomething;
</script></head>
<body>
<div id="divCoord"></div>
</body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
document.getElementById('divCoord').innerHTML = 'Y= '+posy+' X= '+posx+'.';
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
document.getElementById('divCoord').innerHTML = 'Y= '+posy+' X= '+posx+'.';
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
window.onmousemove=doSomething;
</script></head>
<body>
<div id="divCoord"></div>
</body></html>
Ga eerst eens lezen voordat je kopieert:
http://www.quirksmode.org/js/events_properties.html#position
http://www.quirksmode.org/js/events_order.html
http://www.quirksmode.org/js/events_mouse.html
http://www.quirksmode.org/js/this.html