Următoarele sunt două metode de a construi un link care are unicul scop de a rula cod JavaScript. Care este mai bine, în termeni de funcționalitate, viteză de încărcare a paginii, scopuri de validare, etc.?
function myJsFunc() {
alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>
sau
function myJsFunc() {
alert("myJsFunc");
}
<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
Eu folosesc javascript:void(0)`.
Trei motive. Încurajarea utilizării de #
între o echipă de dezvoltatori duce inevitabil la unele folosind valoarea returnată de o funcție numită astfel:
function doSomething() {
//Some code
return false;
}
Dar apoi au uitat să utilizați revenirea lui doSomething()în onclick și de a folosi doar
doSomething()`.
Un al doilea motiv pentru a evita #
e că la final return false;
nu se va executa dacă funcția numită aruncă o eroare. Prin urmare, dezvoltatorii trebuie să amintim, de asemenea, să se ocupe de orice eroare în mod corespunzător numit în funcție.
Un al treilea motiv este că există cazuri în care "onclick" eveniment proprietate este alocat dinamic. Prefer să fie capabil de a apela o funcție sau de a atribui în mod dinamic, fără a fi nevoie să cod în funcție în mod special pentru o metoda de fixare sau altul. Prin urmare meu "onclick" (sau pe ceva) în markup HTML arata astfel:
onclick="someFunc.call(this)"
SAU
onclick="someFunc.apply(this, arguments)"
Folosind javascript:void(0)` evită toate cele de mai sus, dureri de cap, și m-am't a găsit nici un exemplu de un dezavantaj.
Deci, dacă te're un singur producător, atunci puteți face în mod clar alegerea ta, dar dacă lucrați ca o echipă trebuie să fie de stat:
Folosesc href="#", asigurați-vă că "onclick" conține întotdeauna
return false; la final, că orice numește funcția nu arunca o eroare și dacă atașați o funcție dinamic la "onclick" proprietate asigurați-vă că la fel de bine ca nu a aruncat o eroare se returneaza "false".
SAU
Folosesc href="javascript:void(0)"`
Cea de-a doua este în mod clar mult mai ușor să comunice.
Nici una nici alta.
Dacă puteți avea un URL-ul real în care are sens să le folosim ca HREF. Onclick câștigat't foc dacă cineva middle-click pe link pentru a deschide o filă nouă sau dacă au JavaScript dezactivat.
Dacă acest lucru nu este posibil, atunci ar trebui cel puțin injectați etichetă ancoră în documentul cu JavaScript și corespunzătoare, faceți clic pe stivuitoare eveniment.
Îmi dau seama că nu e't întotdeauna posibil, dar, în opinia mea, aceasta ar trebui să fie pregătit pentru în curs de dezvoltare orice site-ul web public.
Check out Discret JavaScript și Progressive enhancement (ambele pe Wikipedia).
FaceLink " sau " Linksau orice altceva care conține un "onclick" atribut - a fost bine în urmă cu cinci ani în urmă, deși acum acesta poate fi o practică proastă. Aici's de ce:
Promovează practica de deranjante JavaScript - care s-a dovedit a fi greu de intretinut si dificil de scară. Mai multe despre acest lucru în Discret JavaScript.
Te're petrece timpul scriind incredibil prea verbose de cod care are foarte puțin (dacă este cazul) beneficii la codebase.
Acum sunt mai bine, mai ușor, și mai mult de întreținut și scalabile moduri de a obține rezultatul dorit.
Doar don't au o "href" atribut la toate! Orice bun CSS reset va avea grijă de lipsă default cursorul stil, așa că este o non-problema. Apoi atașați JavaScript funcționalitate folosind grațios și discret de bune practici - care sunt mai mult de întreținut ca JavaScript logica rămâne în JavaScript, în loc de în markup - care este esențială atunci când începe în curs de dezvoltare la scară mare JavaScript aplicații care necesită logica pentru a fi divizat în blackboxed componente și template-uri. Mai multe despre acest lucru în pe scară Largă Aplicație JavaScript Arhitectura
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>
// 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; }
Pentru o scalabile, blackboxed, Backbone.js componenta exemplu - [a se vedea acest lucru jsfiddle exemplu aici][5]. Observați cum vom utiliza discret JavaScript destinații de plasare, și într-o cantitate mică de cod au o componentă care poate fi repetat pe pagina de mai multe ori, fără efecte secundare sau conflictele între diferite componente de cazuri. Uimitor!
Omiterea "href" atribut " un "element va determina element să nu fie accesibile folosind" tab " tasta de navigare. Dacă doriți ca respectivele elemente să fie accesibil prin intermediul " tab " cheie, puteți seta tabindex
atribut, sau de a folosi butonul` elemente în loc. Puteți cu ușurință stil buton de elemente pentru a arata ca link-uri normale după cum sa menționat în Tracker1's a răspunde.
Omiterea "href" atribut " un " element va determina Internet Explorer 6 și Internet Explorer 7 pentru a nu lua pe a:hover
de styling, care este motivul pentru care am adaugat un simplu JavaScript shim pentru a realiza acest lucru prin intermediul o.hover
în loc. Ceea ce e perfect ok, ca daca nu - 't au un atribut href și nici o degradare apoi link-ul câștigat't de lucru, oricum - și te'll au probleme mai mari să-ți faci griji.
Dacă doriți ca acțiunea să lucreze în continuare cu JavaScript dezactivat, apoi folosind un element cu o "href" atribut care merge la unele URL-ul care va efectua acțiunea manual în loc printr-o cerere Ajax sau cum ar trebui să fie calea de a merge. Dacă faci asta, atunci doriți să vă asigurați că face un eveniment.preventDefault()
pe faceți clic pe apel pentru a face sigur că atunci când butonul este apăsat nu urmați link-ul. Această opțiune se numește degradare.
Aș sugera nici. Mi-ar folosi un stilizate `
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>
În acest fel puteți atribui onclick. Am sugera, de asemenea, obligatoriu, prin intermediul script-ul, nu folosesc "onclick" atribut pe element de etichetă. Doar te-am prins este pseudo 3d efect de text în vârstă de principiu, care nu poate fi dezactivat.
Dacă TREBUIE să utilizați Un element, utilizați javascript:void(0); pentru motivele deja menționate.
NOTĂ: puteți înlocui 0
cu un șir de caractere, cum ar fi javascript:void('Delete record 123')` care poate servi ca un indicator suplimentar care va arăta ce faceți clic pe va face de fapt.
Primul, în mod ideal, cu o legătură reală de a urmări în cazul în care utilizatorul are JavaScript dezactivat. Doar asigurați-vă că să se întoarcă false pentru a preveni faceți clic pe eveniment de ardere dacă JavaScript execută.
<a href="#" onclick="myJsFunc(); return false;">Link</a>
Dacă utilizați Angular2, acest fel de lucrări:
<a [routerLink]="" (clic)="passTheSalt()">Click</a>
.
Nici dacă mă întrebi pe mine;
Dacă "link" are unicul scop de a rula cod JavaScript nu't se califica ca un link; mai degrabă o bucată de text cu o funcție JavaScript cuplat la ea. Mi-ar recomanda pentru a utiliza o <interval> tag cu un handler onclick atașat și niște bază CSS pentru immitate un link. Link-uri sunt realizate pentru navigație, și în cazul în cod JavaScript e't pentru navigare că nu ar trebui să fie un
tag.
Exemplu:
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>
În mod ideal,'d a face acest lucru:
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
Sau, chiar mai bine,'d au acțiune implicită link-ul în HTML, și te'd adauga onclick eveniment element discret, prin intermediul JavaScript după DOM face, asigurându-se astfel că, în cazul în care JavaScript nu este prezent/utilizate nu't fi inutil stivuitoare eveniment enigmatic codul și potențial obfuscating (sau cel puțin distrage atentia de la) ta de conținut real.
Sunt de acord cu sugestii în altă parte care să ateste că ar trebui să utilizați URL regulat în "href" atribut, atunci suna unele funcții JavaScript în onclick. Defectul este că ei automat se adaugă return false
după apel.
Problema cu această abordare este că, dacă funcția nu va funcționa sau dacă nu va fi nici o problema, link-ul va deveni unclickable. Onclick eveniment se va întoarce întotdeauna "false", deci normal URL-ul nu va fi numit.
Nu's soluție foarte simplă. Să funcționeze returna "true" dacă funcționează corect. Apoi, utilizați valoarea returnată pentru a determina dacă faceți clic pe ar trebui să fie anulate sau nu:
JavaScript
function doSomething() {
alert( 'you clicked on the link' );
return true;
}
HTML
<a href="path/to/some/url" onclick="return !doSomething();">link text</a>
Rețineți, că am nega urmare a doSomething () funcția. Dacă funcționează, se va returna "true", astfel încât acesta va fi negate ("false") și
cale/catre/unele/URLnu va fi numit. Dacă funcția va returna "fals" (de exemplu, browser-ul nu - 't suport ceva utilizate în cadrul funcției sau orice altceva va merge prost), este negată de a
adevăratși
cale/catre/unele/URL` este numit.
#
este mai bună decât `javascript:nimic, dar este chiar mai bine:
HTML:
<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>
JavaScript:
$(function() {
$(".some-selector").click(myJsFunc);
});
Tu ar trebui să depună eforturi mereu pentru degradare (în cazul în care utilizatorul nu't aveți JavaScript activat...și atunci când este cu specificatii. și buget). De asemenea, este considerat forma rău să utilizați JavaScript atribute și protocolul direct în HTML.
Răspunsul eliminat în semn de protest față de DECI's de conducere și tratamentul lor de Monica.
Dacă nu're scrie link-ul, folosind JavaScript (astfel încât să știi că's activat în browser-ul), ar trebui să fie în mod ideal, oferind o buna link-ul pentru cei care sunt navigare cu JavaScript dezactivat și apoi preveni acțiunea implicită de link-ul în onclick tratare a evenimentului. În acest fel cei cu JavaScript activat va rula funcția și cei cu JavaScript dezactivat, va sări la o pagină corespunzătoare (sau locație în aceeași pagină), mai degrabă decât doar să faceți clic pe link-ul și de a nu avea nimic să se întâmple.
Cu siguranta hash (#
) este mai bine, deoarece în JavaScript este un pseudoscheme:
Desigur "#" cu un handler onclick care împiedică acțiunea implicită este [mult] mai bine. Mai mult decât atât, un link care are unicul scop de a rula JavaScript nu este cu adevărat "link" dacă sunteți utilizator trimiterea la unele sensibil ancora de pe pagina (doar # va trimite la partea de sus), atunci când ceva nu merge bine. Pur și simplu, puteți simula aspectul de link-ul cu stil și să uitați despre href deloc.
În plus, în ceea ce privește cowgod's sugestie, mai ales aceasta: `...href="javascript_required.html" onclick="... Asta este o abordare bună, dar nu't distinge între "JavaScript dezactivat" și "onclick nu" scenarii.
Mi-ar folosi:
<a href="#" onclick="myJsFunc();return false;">Link</a>
Motive:
return false;
, pagina nu't sari la partea de sus sau de a sparge butonul "înapoi".Eu aleg folosi javascript:void(0), pentru a folosi acest lucru ar putea preveni click dreapta pentru a deschide meniul conținut. Dar
javascript:;` este mai scurt și de a face același lucru.
Deci, atunci când faci ceva de JavaScript lucruri cu un <a /> tag și dacă ai pus
href="#", la fel de bine, puteți adăuga return false la finalul evenimentului (în caz de inline eveniment obligatoriu) cum ar fi:
<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>
Sau puteți schimba href atribut cu JavaScript, cum ar fi:
<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>
sau
<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
Dar semantic, toate cele de mai sus modalități de a realiza acest lucru sunt greșite (funcționează bine, deși). Dacă nici un element nu este creat pentru a naviga la pagina si care au unele JavaScript lucruri asociate cu ea, atunci el nu ar trebui să fie un ` tag.
Puteți utiliza pur și simplu un `
Deci, există un beneficiu pentru a utiliza <a href="#">
. Veți obține indicatorul cursorului implicit pe acel element, atunci când faci un href="#". Pentru că, eu cred că poți folosi CSS pentru acest ca
cursor:pointer; "" care rezolvă această problemă, de asemenea.
Și la final, dacă sunt obligatorii evenimentul din codul JavaScript în sine, nu poți să faci event.preventDefault()pentru a realiza acest lucru dacă utilizați
tag, dar dacă nu sunteți folosind un ` tag pentru acest lucru, nu veți obține un avantaj, nu't nevoie pentru a face acest lucru.
Deci, dacă vedeți, l'e mai bine să nu utilizeze o etichetă pentru acest gen de lucruri.
Don't folosi link-uri pentru unicul scop de a rula JavaScript.
Utilizarea href="#" derulează pagina în partea de sus; utilizarea void(0) creează probleme de navigare în browser-ul.
În schimb, utilizați un element, altul decât un link:
<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>
Și stil cu CSS:
.funcActuator {
cursor: default;
}
.funcActuator:hover {
color: #900;
}