Javascript goeroe gezocht voor eventhandler probleem

[Duwgati]

Ik wil aan de options uit een HTML-select menu een mouseover handler koppelen. Nou is dat normaal niet mogelijk dus ik dacht, ik herschrijf de DOM en vervang de <select><option>.... structuur door een <ul><li>.... structuur.

 

Tot zover geen probleem, zie voorbeeld.

 

Maar nu zit er nog 1 schoonheidsfoutje in. Je moet een optie selecteren om het menu te sluiten. Ergens buiten het menu klikken laat het menu gewoon open staan.

 

Dus ik dacht een eventhandler met eventbubbling in te bouwen, maar hoe ik het ook probeer, ik loop telkens tegen de verschillen in afhandeling door IE en FF aan. Met name IE zorgt voor problemen. Als ik het voor FF werkend heb, opent IE het hele menu niet meer.

 

Iemand hier deskundig genoeg om mij hiermee verder te helpen?

Je kunt de source-files hier downloaden

[Gast]

Misschien iets met onfocusout="javascript:this.getElementsByTagName('UL')[0].style.visibility = 'hidden'" bij de select? Even uit het blote hoofd gedaan, dus het zal vast niet direct werken....

[Duwgati]

Nee daar was ik zelf ook mee begonnen, maar dat lukt niet omdat de focus op de <li> ligt wanneer ik klik om het menu te openen. Ga ik dan een regel naar beneden (de eerste optie, dan kom ik in de sibblings <ul><li>.... terecht en is de parent <li> dus de focus kwijt en sluit het menu onmiddelijk.

 

Even voor het gemak het geheel visualiseren. Zo ziet de HTML code eruit als alles nog in selects is opgebouwd:

Code:

<select id="land" name="land" title="Ltitle">  <option value="blank">Select a country</option>  <option value="lbe">Belgium</option>  <option value="lfr">France</option>  <option value="lde">Germany</option>  <option value="lnl">Netherlands</option>  <option value="luk">United Kingdom</option></select>

 

En zo ziet de code eruit nadat ik de DOM herschreven heb:

Code:

 <ul id="land">  <li style="z-index: 99;"><a id="Ltitle" class="mainfoldericon" href="javascript:void(0);">Select a country</a>    <ul style="top: 20px; position: absolute; z-index: 999;">      <li title="lbe"> <a href="javascript:selectValue('land', 'lbe', 'Ltitle', 'Belgium');">Belgium</a> </li>      <li title="lfr"> <a href="javascript:selectValue('land', 'lfr', 'Ltitle', 'France');">France</a> </li>      <li title="lde"> <a href="javascript:selectValue('land', 'lde', 'Ltitle', 'Germany');">Germany</a> </li>      <li title="lnl"> <a href="javascript:selectValue('land', 'lnl', 'Ltitle', 'Netherlands');">Netherlands</a> </li>      <li title="luk"> <a href="javascript:selectValue('land', 'luk', 'Ltitle', 'United Kingdom');">United Kingdom</a> </li>    </ul>  </li></ul>

 

Als het menu gesloten is, is alleen de eerste <li> zichtbaar. Op onClick opent die de onderliggende <ul>. Dus je ziet dat de eerste <li> al focus verliest zodra ik de muis naar beneden beweeg naar een van de opties in het menu.

 

Nee, ik zal het met document.onclick (of window.onclick) en element.onclick moeten oplossen en daarvoor heb ik dan event bubbling nodig. Voor FF had ik het al een keer werkend, maar toen deed het in IE niks meer. Op dat punt ben ik nu nog steeds.

[WPW]

Google "Javascript eventhandler" ? staat doelgericht wel wat bij. hoe ziet de werkende kode voor FF eruit?

[Duwgati]

Wat dacht je dat ik de afgelopen dagen gedaan heb.

En behalve Google heb ik Danny Goodman's Javascript Bible ook bij de hand.

Quirksmode heb ik inmiddels van voor naar achter doorgenomen en weer terug, en geprobeerd zijn scripts (en ook andere) te transplanteren, maar ook dat werkt niet.

 

Het probleem zit 'm volgens mij in het afvangen van de onclick voor het openen van het menu. Dat gebeurt nu met een inline functie omdat ik het anders niet werkend krijg in IE. En juist die inline functie is volgens mij degene die roet in het eten gooit.

 

De oplossing die ik werkend had in FF had ik gebouwd met een gewone onClick functie, maar dan haakt IE af, dus heb ik die code alweer weggegooid <img src="/forums/images/graemlins/blush.gif" alt="" />

[WPW]

Zijn er geen sites die zoiets al werkend hebben? op die manier heb ik aardig wat code bij mekaar gesprokkelt. En neem een 2de pc om te testen, soms gaat java lokaal vreemd doen en werkt er bijna niks meer tot de pc reboot.

[Duwgati]

Ik heb er nog geen kunnen vinden helaas.

[WPW]

Je kan overwegen om een blik verre oosten programmeurs open te maken, had zoiets begin dit jaar, 3 maanden aan het kloten om iets werkend te krijgen, blik ingekocht, iets van 300 euro armer maar wel een werkend programma met source.

[Duwgati]

Voor diegenen die het interesseert, ik heb het probleem opgelost. De links zijn ongewijzigd (zie hierboven).

 

Nu de source nog wat kuisen en kijken of ik in FF een betere eventcapturing kan realiseren. Hij roept nu bij alles dat ik op het document element (id=myDocument) heb geklikt. In IE gaat het wel goed.

 

Ik ben trouwens ook benieuwd of er mensen zijn die kunnen testen met andere browsers zoals IE-5.x of IE-7 of Opera o.d. en of dat werkt.

Even afgezien van een bug waarbij Opera 9.23 de hoogte van het debugging-venster niet respecteert.

[Gast]

Ik zou het menu ook in laten klappen als je op de bovenste regel klikt. Dat doen de standaard uitklapmenu's ook namelijk... Mooi dat het werkt verder trouwens.. Hoe heb je het nou in de basis opgelost?

[Duwgati]

Bedankt voor de aanwijzing, dat had ik de laatste keer niet meer getest <img src="/forums/images/graemlins/blush.gif" alt="" />

Dat zal een kleinigheid zijn om op te lossen. Samen met nog enkele andere kleinigheden <img src="/forums/images/graemlins/wink.gif" alt="" />

 

De oplossing:

Ik gebruik nu niet de universele onclick event om alles aan te sturen maar heb het opgedeeld in 2 stukken. Een normale link met een javascript function:

<a href="javascript:....... binnen de <li>

 

Die link geeft aan waar er geklikt wordt: binnen de geopende <ul><li> of daarbuiten. Er binnen betekent er is een keuze gemaakt, er buiten betekent er is geen keuze gemaakt.

Daarna neemt de universele handler het over en kijkt of er een menu moet worden geopend of gesloten, afhankelijk van de locatie waar geklikt wordt.