Vraag Welke "href" -waarde moet ik gebruiken voor JavaScript-links, "#" of "javascript: void (0)"?


Hieronder volgen twee methoden voor het maken van een koppeling die uitsluitend tot doel heeft JavaScript-code uit te voeren. Wat is beter, in termen van functionaliteit, laadsnelheid van pagina's, validatiedoeleinden, enz.?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

of

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>


3672


oorsprong


antwoorden:


ik gebruik javascript:void(0).

Drie redenen. Stimuleren van het gebruik van # tussen een team van ontwikkelaars leidt onvermijdelijk tot sommige met behulp van de geretourneerde waarde van de functie die als volgt wordt genoemd:

function doSomething() {
    //Some code
    return false;
}

Maar dan vergeten ze te gebruiken return doSomething() in de onclick en gewoon gebruiken doSomething().

Een tweede reden om te vermijden # is dat de finale return false; wordt niet uitgevoerd als de opgeroepen functie een fout genereert. Vandaar dat de ontwikkelaars ook moeten onthouden om elke fout op de juiste manier af te handelen in de aangeroepen functie.

Een derde reden is dat er gevallen zijn waarin het onclick gebeurteniseigenschap wordt dynamisch toegewezen. Ik geef er de voorkeur aan om een ​​functie te kunnen aanroepen of dynamisch toe te wijzen zonder de functie specifiek voor de ene methode van bijlage of een andere te moeten coderen. Vandaar mijn onclick (of iets anders) in HTML-opmaak ziet er als volgt uit:

onclick="someFunc.call(this)"

OF

onclick="someFunc.apply(this, arguments)"

Gebruik makend van javascript:void(0) vermijdt alle bovengenoemde hoofdpijn en ik heb geen voorbeelden van een nadeel gevonden.

Dus als je een eenzame ontwikkelaar bent, kun je duidelijk je eigen keuze maken, maar als je als een team werkt, moet je ofwel verklaren:

Gebruik href="#", zorg ervoor dat onclick bevat altijd return false; op het einde, dat elke opgeroepen functie geen fout veroorzaakt en als u dynamisch een functie koppelt aan de onclick eigenschap zorgt ervoor dat, evenals het niet gooien van een fout, het terugkeert false.

OF

Gebruik href="javascript:void(0)"

De tweede is duidelijk veel gemakkelijker om te communiceren.


2006



Geen van beide.

Als u een echte, logische, URL kunt gebruiken, gebruik die dan als de HREF. De onclick wordt niet geactiveerd als iemand in het midden op uw link klikt om een ​​nieuw tabblad te openen of als JavaScript is uitgeschakeld.

Als dat niet mogelijk is, moet u op zijn minst de ankertag in het document injecteren met JavaScript en de juiste klikgebeurtenishandlers.

Ik besef dat dit niet altijd mogelijk is, maar naar mijn mening moet er naar gestreefd worden bij het ontwikkelen van een openbare website.

Uitchecken Onopvallend JavaScript en Progressieve verbetering (beide Wikipedia).


1198



Aan het doen <a href="#" onclick="myJsFunc();">Link</a> of <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> of wat dan ook dat een bevat onclick attribuut - was vijf jaar geleden al goed, maar nu kan het een slechte gewoonte zijn. Dit is waarom:

  1. Het bevordert de praktijk van opdringerige JavaScript - die moeilijk te onderhouden en moeilijk te schalen bleek te zijn. Meer hierover in Onopvallend JavaScript.

  2. Je besteedt je tijd aan het schrijven van ongelooflijk overdreven uitgebreide code - wat erg weinig (of geen) voordeel heeft voor je codebase.

  3. Er zijn nu betere, gemakkelijkere en beter onderhoudbare en schaalbare manieren om het gewenste resultaat te bereiken.

De onopvallende JavaScript-manier

Heb gewoon geen href attribuut helemaal! Elke goede CSS-reset zou zorgen voor de ontbrekende standaardcursorstijl, dus dat is een non-issue. Voeg vervolgens uw JavaScript-functionaliteit toe met behulp van sierlijke en onopvallende praktische tips - die beter te onderhouden zijn omdat uw JavaScript-logica in JavaScript blijft, in plaats van in uw markup - wat essentieel is wanneer u grootschalige JavaScript-toepassingen ontwikkelt waarvoor uw logica moet worden opgesplitst componenten en sjablonen in blackbox. Meer hierover in Grootschalige JavaScript-toepassingsarchitectuur

Eenvoudig codevoorbeeld

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Een blackbox Backbone.js voorbeeld

Voor een schaalbaar, Blackboxed, Backbone.js component voorbeeld - zie dit werkende jsfiddle-voorbeeld hier. Merk op hoe we onopvallende JavaScript-praktijken gebruiken en dat in een klein aantal code een component meerdere keren op de pagina kan worden herhaald zonder bijwerkingen of conflicten tussen de verschillende componentinstanties. Verbazingwekkend!

Notes

  • Het weglaten van de href attribuut op de a element zorgt ervoor dat het element niet toegankelijk is via tab belangrijke navigatie. Als u wilt dat deze elementen toegankelijk zijn via de tab toets, kunt u de tabindex attribuut, of gebruik button elementen in plaats daarvan. U kunt knoopelementen eenvoudig opmaken om eruit te zien als normale links zoals vermeld in Het antwoord van Tracker1.

  • Het weglaten van de href attribuut op de a element zal veroorzaken Internet Explorer 6 en Internet Explorer 7 om het niet aan te nemen a:hover styling, daarom hebben we een eenvoudige JavaScript-shim toegevoegd om dit via te bereiken a.hover in plaats daarvan. Dat is perfect, alsof je geen href-kenmerk en geen sierlijke degradatie hebt, dan werkt je link toch niet - en heb je grotere problemen om je zorgen over te maken.

  • Als u wilt dat uw actie nog steeds werkt met JavaScript uitgeschakeld, dan gebruikt u een a element met een href attribuut dat naar een bepaalde URL gaat die de actie handmatig zal uitvoeren in plaats van via een Ajax-verzoek of wat dan ook de beste keuze is. Als je dit doet, dan wil je ervoor zorgen dat je een event.preventDefault() op uw klikoproep om zeker te zijn dat wanneer op de knop wordt geklikt, deze de koppeling niet volgt. Deze optie wordt sierlijke degradatie genoemd.


734



'#' brengt de gebruiker terug naar de bovenkant van de pagina, dus ik ga er meestal mee akkoord void(0).

javascript:; gedraagt ​​zich ook als javascript:void(0);


281



Ik zou eerlijk geen van beide voorstellen. Ik zou een gestileerde gebruiken <button></button> voor dat gedrag.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Op deze manier kunt u uw onclick toewijzen. Ik stel ook voor binding via script, niet met behulp van de onclick attribuut op de elementtag. De enige diecha is het psuedo 3D-teksteffect in oudere IE's die niet kunnen worden uitgeschakeld.


als jij MOET gebruik een A-element, gebruik javascript:void(0); om reeds genoemde redenen.

  • Wordt altijd onderschept in het geval dat uw onclick-evenement mislukt.
  • Er zullen geen foutieve laadbeurten plaatsvinden of andere gebeurtenissen activeren op basis van een hash-wijziging
  • De hash-tag kan onverwacht gedrag veroorzaken als de klik doorvalt (onclick-worpen), vermijd deze tenzij het een passend doorvalgedrag is en u de navigatiegeschiedenis wilt wijzigen.

OPMERKING: u kunt de 0 met een string zoals javascript:void('Delete record 123') welke kan dienen als een extra indicator die laat zien wat de klik daadwerkelijk zal doen.


209



De eerste, idealiter met een echte link om te volgen als de gebruiker JavaScript heeft uitgeschakeld. Zorg ervoor dat false wordt geretourneerd om te voorkomen dat de klikgebeurtenis wordt geactiveerd als JavaScript wordt uitgevoerd.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Als u Angular2 gebruikt, werkt deze manier:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Kijk hier https://stackoverflow.com/a/45465728/2803344


128



Idealiter zou je dit doen:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Of, nog beter, je hebt de standaard actiekoppeling in de HTML, en je zou de onclick-gebeurtenis onopvallend toevoegen aan het element via JavaScript nadat de DOM is gegenereerd, waardoor je zeker weet dat als JavaScript niet aanwezig / gebruikt is, je dat niet doet hebben nutteloze event-handlers die je code doorzoeken en mogelijk je werkelijke inhoud verdoezelen (of in ieder geval afleiden van).


90



Noch als je het mij vraagt;

Als uw "link" uitsluitend bedoeld is om JavaScript-code uit te voeren, kwalificeert deze niet als een link; eerder een stuk tekst met een daaraan gekoppelde JavaScript-functie. Ik zou aanraden om een ​​te gebruiken <span> tag met een onclick handler gekoppeld en een aantal basis-CSS om een ​​link te imiteren. Links zijn gemaakt voor navigatie en als uw JavaScript-code niet voor navigatie is, mag deze geen <a> label.

Voorbeeld:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>


86