event.relatedTarget werkt niet

Status
Niet open voor verdere reacties.
H

henkhoogerbrug

Gebruiker
Lid geworden
25 sep 2008
Berichten
107
ik was op zoek naar de werking van event.relatedTarget omdat dit in mijn script niet goed werkte (FF en IE).
Uiteraard kwam ik op de site van w3schools terecht, hier vond ik onderstaand voorbeeld

[JS]<html>
<head>
<script type="text/javascript">
function getRelElement(event)
{
var txt="The cursor just exited the ";
txt=txt + event.relatedTarget.tagName + " element.";
alert(txt);
}
</script>
</head>
<body>

<p onmouseover="getRelElement(event)">
Mouse over this paragraph.</p>

</body>
</html> [/JS]

Wanneer ik dit echter test, dan wordt de relatedTarget niet gevuld. Hoe los ik dit op?
 
Ik weet niet precies wat het zou moeten doen, maar ik krijg dit: [bijlage]

Daarnaast heeft Firefox een erg handig foutenconsole, dit is te openen met ctrl+shift+j, mischien kan je daar wat vinden. Overgens gebruik ik FF 3.5.



:thumb:
 

Bijlagen

  • wasd.JPG
    wasd.JPG
    14,7 KB · Weergaven: 36
Uit Quirksmode's Mouse Events


W3C heeft de relatedTarget eigenschap toegevoegd aan mouseover en mouseout events.
Deze bevat het element waar de muis vandaan komt in geval van een mouseover., of waar zij naartoe gaat bij een mouseout.

Microsoft heeft twee properties die deze informatie bevatten:
  • fromElement; verwijst naar het element waar de muis vandaan komt, voor de mouseover
  • toElement; verwijst naar het element waar de muis naartoe gaat. Dit is interessant in het geval van een mouseout.



Cross-browser scripts

Dus wanneer je wil weten waar de muis vandaan komt in het geval van een mouseover doe je:

PHP: 
function doSomething(e) {
	if (!e) var e = window.event;
	var relTarg = e.relatedTarget || e.fromElement;
}

Wanneer je wil weten waar een muis naartoe gaat in het geval van een mouseout doe je:

PHP: 
function doSomething(e) {
	if (!e) var e = window.event;
	var relTarg = e.relatedTarget || e.toElement;
}

Ik neem dan aan dat Henk test in Internet Explorer, en het verklaart waarom het bij Vegras wel werkt.
 
Laatst bewerkt:
Vegras en JP Romijn, beiden bedankt, ik ben nu een stukje verder gekomen.

Ik ben bezig om mijn website compatible te maken met IE en FF, dus ben in beide browsers aan het testen. (toevallig had ik w3schools wel in IE getest, dus logisch dat het niet werkte)

Ik loop nu echter tegen het volgende aan (zie ook html voorbeeldbestand).
Ik heb een div, met daarin allemaal img's. Iedere img heeft een rechtermarge van 2px. Wanneer ik echter met de muisaanwijzer een img verlaat dan mag er geen popup komen (dit werkt nu ook).
Wanneer ik met de muisaanwijzer vanaf de 2px marge weer op een img kom, dan mag er ook geen popup komen, ik blijf dan namelijk binnen de div (dit werkt niet goed).
Wanneer ik met de muisaanwijzer de div verlaat, dan moet er wel een popup komen (dit werkt volgens mij goed).

Binnen de div verschijnt er dus een popup, zodra ik van de marge naar een img ga, dit is echter niet de bedoeling. Wat gaat er fout?
 

Bijlagen

  • SlideShow.txt
    2,5 KB · Weergaven: 10
Je hebt het voor elkaar gekregen om te achterhalen welk element er verlaten wordt en welk element er begaan wordt? Dan lijkt het me niet zo heel lastig om deze functionaliteit te gebruiken voor je volgende probleem.

Je kan bijvoorbeeld een schakelaar achtige property aan je div verbinden. Die wordt op false gezet nadat de div betreden wordt (en de functionaliteit is uitgevoerd), en gaat pas uit wanneer de div verlaten wordt EN het element dat betreden wordt heeft als tagname NIET img.
Alleen wanneer de schakelaar opnieuw aan is wordt de functionaliteit uitgevoerd.
 
de fout zat in het if-statement. Door het if-statement te wijzigen naar:

[JS]if (relTarg.tagName != 'IMG' && relTarg.id != slide_i)[/JS]

gaat het wel goed.

Bedankt voor de hulp!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan