Avatar billede hoppe11 Nybegynder
25. august 2009 - 14:22 Der er 14 kommentarer og
1 løsning

hvis man klikker udenfor et div elm

jeg skal bruge et lille script som laver en operation hvis man klikker et sted udenfor et div elm?

jeg ved ikke om det skal være en listener man skal bruge eller man kan klare sig noget med et event?
Avatar billede olebole Juniormester
25. august 2009 - 15:32 #1
<ole>

Det kan du ikke lægge på divet. Det er noget, du skal detekte udenfor elementet, så et link til siden er nok påkrævet  =)

/mvh
</bole>
Avatar billede hoppe11 Nybegynder
25. august 2009 - 15:59 #2
jamen det var også det jeg tænkte.. :)

kan du ikke bare lave et lille eksempel?
Avatar billede olebole Juniormester
25. august 2009 - 21:57 #3
Det kunne være noget i denne stil:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>TITLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {
    position: absolute;
    left: 400px;
    top: 250px;   
    width: 100px;
    height: 100px;
    padding: 20px;
    background: #f00;
}
</style>
<script type="text/javascript">
function fooBar(e) {
    var o = e?e.target:event.srcElement, bFound = false,
    oDoc = document.documentElement;
    while (o!=oDoc) {
        if (o.getAttribute("id")=="foo") {
            bFound = true;
            break;
        }
        o = o.parentNode;
    }
    if (!bFound) alert("Du klikkede udenfor det røde div");
}
window.onload = function(){
    document.onclick = fooBar;
}
</script>
</head>
<body>

<div id="foo">Et DIV element <b>med noget fed tekst</b></div>

</body>
</html>
Avatar billede hoppe11 Nybegynder
25. august 2009 - 22:23 #4
det virker :)

men hvor kommer e ind henne når du kører funktionen fooBar uden parametrer?

smid et svar
Avatar billede olebole Juniormester
25. august 2009 - 22:34 #5
Firefox sender altid event objektet med som argument til en event handler. I IE ligger det i window.event eller bare event. Dér kommer e ind  ;o)
Avatar billede hoppe11 Nybegynder
25. august 2009 - 22:42 #6
arh..

men hvis jeg gerne vil have id'et "foo" med som parameter i min funktion, hvordan gør jeg så det.. nu "e" allerede er der?
Avatar billede hoppe11 Nybegynder
25. august 2009 - 22:54 #7
det bliver lidt noget skidt det her kommer jeg til at se..

er det ikke muligt at lave det på en anden måde så den går efter koordinater?

altså om man rammer udenfor koordinaterne hvor mit elmement befinder sig
Avatar billede olebole Juniormester
25. august 2009 - 22:57 #8
Fortæl, hvordan det skal bruges og til hvad  ;o)
Avatar billede hoppe11 Nybegynder
25. august 2009 - 23:28 #9
jamen jeg har et div element som foldes ud ved at højden ændres.. når man så klikker udenfor div'ens koordinater skal den folde sig sammen igen..

havde ikke lige tænkt på at der var et par ekstra elementer i den udfoldede div, så det vil vel være bedre at tjekke om man rammer indenfor div'ens kooridnater?
Avatar billede olebole Juniormester
25. august 2009 - 23:42 #10
Det gør scriptet allerede med løkken:

    while (o!=oDoc) {
        if (o.getAttribute("id")=="foo") {
            bFound = true;
            break;
        }
        o = o.parentNode;
    }
Avatar billede olebole Juniormester
25. august 2009 - 23:44 #11
Du kan jo prøve at klikke i b elementet i koden ovenfor. Så får du ikke at vide, du klikkede udenfor divet  ;o)
Avatar billede hoppe11 Nybegynder
26. august 2009 - 09:52 #12
ja ok.. mig der er forkert på den :)

men hvordan kan jeg sende flere parametrer med i foobar funktionen?
Avatar billede olebole Juniormester
26. august 2009 - 11:14 #13
window.onload = function(){
    document.onclick = function(e){
        fooBar(e, "en ekstra streng");
    }
}

- og:

function fooBar(e, sTxt) {
    var o = e?e.target:event.srcElement, bFound = false,
    oDoc = document.documentElement;
    alert("Gør noget ved teksten: "+sTxt);
    ... osv ... osv ...
Avatar billede hoppe11 Nybegynder
26. august 2009 - 20:38 #14
tak for hjælpen :)
Avatar billede olebole Juniormester
26. august 2009 - 20:52 #15
- og tak for points  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

IT-JOB