[js] Stopt stopPropagation een click op een link? - Softwareontwikkeling

dinsdag 21 juni 2005 10:05

Acties:

kloonikoon

Topicstarter

Ik probeer aan eenbepaald aantal links in mijn html een onclick event mee te geven waardoor deze bepaalde links in een nieuw venster openen. Ik probeer het zodanig te doen dat de code blijft valideren. Vanwege dit laatste voeg ik de onclick event handlers toe met behulp van javascript. Het voordeel is dat als js niet werkt de site verder perfect in orde blijft werken.

Het probleem
Voor IE was het dit keer het makkelijkst te maken, via attachEvent ken ik een functie toe met argumenten verschillend per link. De functie geeft false terug en IE stopt verdere verwerking van de onclick zodat ik een popup krijg met als inhoud datgene waarnaar de link verwees maar de inhoud van het venster waarin ik klikte ongewijzigd blijft.

Met Firefox heb ik dit keer echter de problemen. Ik heb uiteindelijk een aparte functie er aan toegekend welke false terug geeft en ook stopPropagation aanroept maar het mag niet baten. Ik heb iedere combinatie van wel/niet "return false" en wel/niet "e.stopPropagation()" geprobeerd evenals verschillende manieren van aanroepen; niks heeft mogen baten. Het resultaat in FF is dat ik zowel een popup krijg als ook dat de link geopend wordt in het venster waarin geklikt werd...

De code
Hieronder een aangepaste versie van de code zodat het makkelijk te overzien is. Ik heb een deel weg gehaald welke automatisch de links opzoekt waarbij een popup gewenst is en dergelijke, maar het probleem zelf blijft:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>tweakers voorbeeld</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
</head>

<body>
    <p>Wat tekst hier, en een <a href="http://www.tweakers.net" id="linkVoorbeeld">link</a> daar.</p>

    <script type="text/javascript">
        function fnOpen( strURL ) {
            var oNewWindow = window.open( strURL );

            if ( !oNewWindow ) {
                document.location.href   = strURL;
            }

            return false;
        }

        function fnOpenMoz( e ) {
            fnOpen( this.href );

            // Ik heb deze keuze er in gelaten zodat iets moest werken
            // de stopPropagation optie wordt uitgevoerd...
            if ( e.stopPropagation ) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }

            return false;
        }

        oAnchor = document.getElementById( 'linkVoorbeeld' );

        // For some reason "this" does not refer to the link
        // clicked in the function attached to the links onclick
        // event. So we need to specify the href here already.
        mOpen = new Function('return fnOpen(\''+oAnchor.href+'\');');

        if ( oAnchor.href ) {
            if ( document.addEventListener ) {
                // Hier wordt het event voor FF toegekend.
                // useCapture (3de argument) heb ik op true en false gehad.
                oAnchor.addEventListener('click', fnOpenMoz, true);
            } else if ( document.attachEvent ) {
                oAnchor.attachEvent('onclick', mOpen);
            } else {
                oAnchor.onclick = mOpen;
            }
        }
    </script>
</body>
</html>

Misschien zie ik iets over het hoofd, maar na alle mogelijkheden geprobeerd te hebben weet ik het niet meer... Je moet een klik op een link toch kunnen annuleren??

[ Voor 12% gewijzigd door RwD op 21-06-2005 10:06 ]

dinsdag 21 juni 2005 10:09

Acties:

Sappie

De Parasitaire Capaciteit!

Je kunt hiervoor imo beter gebruik maken van het rel attribuut van een <a> element. Kijk daarvoor bijvoorbeeld hier: http://www.naarvoren.nl/artikel/links.html

verder moet je de oplossing voor firefox hierin zoeken denk ik: event.preventDefault()

Specs | Audioscrobbler

dinsdag 21 juni 2005 10:09

Acties:

crisp

Devver

Pixelated

preventDefault()

overigens:

JavaScript:

1	oAnchor.onclick = someFunction;

werkt gewoon in alle browsers, en dan is de return false vanuit de functie al genoeg om het event te cancellen, en je kan met het 'this' keyword werken (itt wanneer je attachEvent gebruikt - het IE eventmodel is zo brak als een ...)

[ Voor 93% gewijzigd door crisp op 21-06-2005 10:12 ]

Intentionally left blank

dinsdag 21 juni 2005 10:11

Acties:

r0bert

_js
[code=java]
oAnchor = document.getElementById( 'linkVoorbeeld' );
[/code]
kan pas nadat het onload event gefired is heh....

Blijkbaar werkt het zo ook, weet alleen niet of het netjes is

edit: @ crisp, ja ik merkte het toen ik testte

[ Voor 39% gewijzigd door r0bert op 21-06-2005 10:14 ]

dinsdag 21 juni 2005 10:12

Acties:

crisp

Devver

Pixelated

r0bert schreef op dinsdag 21 juni 2005 @ 10:11:
_js
Java:
1
oAnchor = document.getElementById( 'linkVoorbeeld' );
kan pas nadat het onload event gefired is heh....

nee, dat kan al zodra het anchor geparsed is

edit: het enige wat er niet netjes aan is is dat je toch inline javascript in je body gebruikt, maar dat weegt m.i. vaak wel op tegen de nadelen van het onload event gebruiken.

[ Voor 24% gewijzigd door crisp op 21-06-2005 10:16 ]

Intentionally left blank

dinsdag 21 juni 2005 10:20

Acties:

RwD

kloonikoon

Topicstarter

crisp schreef op dinsdag 21 juni 2005 @ 10:09:
preventDefault()

Dat is de oplossing, bedankt.

overigens:
JavaScript:
1
oAnchor.onclick = someFunction;
werkt gewoon in alle browsers, en dan is de return false vanuit de functie al genoeg om het event te cancellen, en je kan met het 'this' keyword werken (itt wanneer je attachEvent gebruikt - het IE eventmodel is zo brak als een ...)

Op de een of andere manier voelt die methode aan als niet goed, alsof het een soort sluipweg is. Maar dat is maar een gevoel...

dinsdag 21 juni 2005 10:22

Acties:

crisp

Devver

Pixelated

RwD schreef op dinsdag 21 juni 2005 @ 10:20:
[...]
Op de een of andere manier voelt die methode aan als niet goed, alsof het een soort sluipweg is. Maar dat is maar een gevoel...

Nee, dat is gewoon DOM level 1 en is imho een betere methode dan attachEvent

Intentionally left blank