[JavaScript] CaptureEvents binnen een div - Softwareontwikkeling

donderdag 18 september 2008 18:12

Acties:

Topicstarter

Ik heb deze code;

JavaScript:

<script type="text/javascript">
window.onload = init;
function init() {
if (window.Event) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = getXY;}
function getXY(e) {
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;
window.status = "x = "+x+ " : "+"y = "+y;}
</script>

Stel ik plaats een absoluut gepositioneerde div op de pagina; <div id="vakje" style="position: absolute; top: 100px; left: 100px">
Hoe pas ik de code uit bovenstaand vakje zo aan dat de muisposities in de linksbovenhoek van deze <div> 0,0 zijn, dus dat de muis enkel in deze <div> meet, en daarbuiten een ander coordinaat geeft; laten we zeggen -1?

Alvast bedankt

[ Voor 5% gewijzigd door een moderator op 18-09-2008 18:15 . Reden: Code tags toegevoegd... ]

donderdag 18 september 2008 18:17

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Euh, kijk eens even in onze Quickstart

Wat heb zélf je al geprobeerd? Gezocht? Gevonden? Je dumpt nu je code en wij mogen voorzeggen hoe je het moet verbouwen?

Als je events captured op je div, dan zul je die events natuurlijk niet krijgen als er met die div niets gebeurd (dus als je muis er buiten gaat worden die events niet eens geraised). Hoe wil je dan -1 krijgen? Wat je wél zou kunnen doen is in het container element die events vangen en dan wat creatief rekenen ofzo.
Oh wacht, je captured al op je document. In dat geval is het toch alleen maar een kwestie van een offset bij je coördinaat optellen?

Oh, en als je code post, gebruik dan code tags in plaats van een table a.u.b.

[ Voor 26% gewijzigd door RobIII op 18-09-2008 18:19 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 18 september 2008 18:19

Acties:

Sebazzz

3dp

Simpel.

JavaScript:

function init() { //init functie van de pagina - draait als deze volledig geladen is
    if (window.Event) {
        document.captureEvents(Event.MOUSEMOVE);
    }
    document.onmousemove = getXY; //event koppelen - getXY wordt gedraait als de muis beweegt
}

function getXY(e) { //event functie
    x = (window.Event) ? e.pageX : event.clientX;
    y = (window.Event) ? e.pageY : event.clientY;
    window.status = "x = "+x+ " : "+"y = "+y;
}

window.onload = init;

Dit is je huidige code. Die heeft een event op het document object.
Maar met bijvoorbeeld dit kan je dat op een ander object, bijvoorbeeld een div met het id 'testje':

JavaScript:

1 2	// in de init functie: var testje = document.getElementById("testje");

Meer zeg ik niet. Aan jouw de taak om de events zoals onmousemove maar ook onmouseout of iets in die zin te koppelen en een functie voor het 'resetten' van de muispositie maakt. Succes!

@hieronder: Hier niet

[ Voor 19% gewijzigd door Sebazzz op 18-09-2008 18:46 ]

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

donderdag 18 september 2008 18:45

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zaterdag 20 september 2008 12:38

Acties:

Rikske

Topicstarter

Ik ben er al een tijd mee bezig en ik had moeten laten weten wat ik al had geprobeerd inderdaad.

Dit is wat ik nu heb:

JavaScript:

<head>
<script type="text/javascript"> 
function init() {
    var testje = document.getElementById("vakje");
    if (window.Event) {
        testje.captureEvents(Event.MOUSEMOVE);
    } 
    testje.onmousemove = getXY;
} 

function getXY(e) { 
    x = (window.Event) ? e.pageX : event.clientX; 
    y = (window.Event) ? e.pageY : event.clientY; 
    window.status = "x = "+x+ " : "+"y = "+y;
} 
</script>
</head>
<body onload = init()>
<div id="vakje" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; 

border: 3px solid black;"></div>
</body>

Bedankt voor deze stap voorwaarts;
Hij meet nu inderdaad binnen de <div>, maar nu komt voor mij het grootste probleem; en dat is dat ie op de linksbovenhoek van de <div> de posities 0,0 moet gaan lezen, ipv. 100, 100.

Nu weet ik inderdaad dat ik dit simpel kan omzeilen door van de posities 100 af te trekken, maar ik heb ook voorbeelden gezien waarbij door het inzetten van 'event.layerX' dit echt vanuit de <div> zelf gemeten wordt. (zie onderstaande voorbeeld)
Ik doe iets fout (maar weet niet wat) want ik krijg het onderstaande voorbeeld maar niet in bovenstaande code geimplementeerd. Wie kan mij helpen?

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>dojo event layer coodinates test</title>
  <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>
  <script type="text/javascript">
    function init() {
      dojo.connect(dojo.byId("main"), "onmousemove", window, "moved");
    }

    function moved(evt) {
      dojo.byId("label").innerHTML = "Target: " + evt.target.id +
                                     " Current Target: " + evt.currentTarget.id +
                                     " layerX: " + evt.layerX +
                                     " layerY: " + evt.layerY;
    }
  </script>
</head>
<body>


<div id="main" style="display: block; position: absolute; overflow:hidden; width: 400px; height: 400px;  border: solid blue; ">
  <div id="label" style="position: absolute; left:0; width: 400px; height:100px;"></div>
  <div id="west" style="position: absolute; left: -100px; width: 300px; top: 100px; background-color: red">
    WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST</div>
  <div id="east" style="position: absolute; left: 200px; width: 300px; top: 100px; background-color: green;">
    EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST</div>
</div>

<script type="text/javascript">
  dojo.addOnLoad(init);
</script>

</body>
</html>