html - Link udføre javascript - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript html link

Bruger #17215 @ 02.09.12 22:26

Hejsa

Jeg har en tekst der hedder "Læs mere", som skal udføre noget javascript og egentligt ikke linke til noget.

Er blevet i tvivl om jeg så bør bruge et link eller lave en div om til at ligne et link og give den samme opførsel med mouse-over/hover effekt og så få den til at udføre mit javascript.

Sagen er at når man klikker på den, skal teksten forsvinde, der udføres et AJAX request som får noget JSON data og skrives ind på siden.
Desværre for at et link vises som et link, skal man have href="noget", for ellers bliver det ikke et link.
Problemet er at hvis jeg skriver ingenting så linkes der til den side man er på, så alt udføres korrekt og javascriptet henter data, indskriver på siden og så refresher den til sin egen adresse og dermed går tilbage til hvor data ikke er der og der står "Læs mere".
Hvis jeg så vælger at bruge "#" i href går jeg til toppen af siden, og ønsker egentligt bare at funktionen udføres uden at ændre position man er på siden og ellers opfører sig og vises som et link så man kan se det er besøgt tidligere og hover-effekt og andet der kendetegner et link.

Jeg har følgende:

HTML kode

 <a onclick="ShowDetails()" href="#">Læs mere</a>

7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 03.09.12 03:21

1.258

Det har noget, at gøre med genbrugelighed af koden, god kodestanarder og adskillelse af logik fra markup.

Hvis du f.eks. Beslutter dig for, at ændre funktionens navn eller elementet skal være et div i stedet for et a. Så skal du nok ændre det flere steder hvis du ligger det inline istedet for ved en eventlistner.

Angående adskillelse af logik fra markup, så er eventlistner versioner også en del af det man kalder for unubtrusive javascript. Altså i den om, at javascript først og fremmest ikke skal være i vejen og, at det skal være nemt og genbrugeligt.

Og /yay for internettet ... Er på ferie på den anden side af verdenen mens jeg skriver den het besked

Bruger #17015 @ 02.09.12 22:34

614

href="#" sender browseren til toppen af din side - og det er nedern hvis de har scrollet.

Så du har to muligheder.

1) At lave et span/div/button tag om, så det opfører sig som du ville have haft a-tagget til at gøre. Key points til css'en er:

CSS kode

 .fake-a { cursor: pointer; }

2) At forhindre a-tagget i at fungere. Du skal bruge event objektet og lave en preventDefault... Sådan:

JScript kode

 function ShowDetails(event) {
   event.preventDefault();
   // dostuff
 }

Mange folk gør den fejltagelse at de laver en return false; Det virker umiddelbart på samme måde - at a-tagget ikke henviser til noget. Men det kan have uønskede sideeffekter.

Fordelen ved at bruge preventdefault er også at du kan lave et fallback. Hvis javascript af en eller anden grund ikke fungerer på din side, så kan folk alligevel læse indholdet.

HTML kode

 <a href="/fallback/indhold.html" onclick="ShowDetails(e)">Læs mere...</a>

Bruger #11328 @ 02.09.12 22:36

1.323

Enten kan du sætte en event listener på dit element:

HTML kode

 <a id='details'>Læs mere</a>
 <script>
   var detailsLink = document.getElementById('details');
   detailsLink.addEventListener('click', function(e) {
     ShowDetails();
   }, false);
 </script>

Eller den lidt mere rodede måde:

HTML kode

 <a href="javascript:void(ShowDetails())">Læs mere</a>

Indlæg senest redigeret d. 02.09.2012 22:36 af Bruger #11328

Bruger #17015 @ 02.09.12 22:44

614

addEventListener fungerer ikke i IE under version 9. Men du kan lave et fallback til attachEvent og opnå det samme. Tak for reminderen. Den optimale løsning må så være:

HTML kode

 <a href="/fallback.html" id="ShowMoreLink">Læs mere</a>
 <script>
 var showEl = document.getElementById('ShowMoreLink'),
     showFn = function (e) {
       e.preventDefault();
       // fetch stuff
     }
 if (showEl.addEventListener) {
   showEl.addEventListener('click', showFn(e));
 } else {
   showEl.attachEvent('onclick', showFn(e));
 }
 </script>

Fandt lige et link til at dokumentere min påstand: https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener#Compatibility

Indlæg senest redigeret d. 02.09.2012 22:51 af Bruger #17015

Bruger #17215 @ 02.09.12 22:55

408

Så attachEvent er til IE under version 9?

Er der en speciel grund til at "javascript:void(ShowDetails())" er en dårlig løsning?

Bruger #17015 @ 02.09.12 23:08

614

Der er noget der gør at jeg ikke bryder mig om den - jeg kan dog ikke komme på noget rationelt argument - det virker bare forkert.

onClick synes jeg er mere passende hvis du ikke kan give alle linksne individuelle id's. Brug evt mit første eksempel, med onclick og en ekstern funktion der bruger preventDefault på event objektet.

Bruger #11328 @ 03.09.12 10:24

1.323

Mente at cross-browser JavaScript var underforstået. Du gør som følger:

JScript kode

 if (el.addEventListener) {
   el.addEventListener('click', function(){/* ... */}, false);
 else if (el.attachEvent) {
   el.attachEvent('click', function() {/* ... */});
 } else {
   el.onclick = function() {/* ... */};
 }

Indlæg senest redigeret d. 03.09.2012 10:25 af Bruger #11328

Link udføre javascript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler