2011-09-26 11 views
32

Quindi forse sto solo non guardare nei posti giusti, ma non riesco a trovare una buona spiegazione di come fare l'equivalente di jQueryversione Vanilla JavaScript del jQuery .cliccate

$('a').click(function(){ 
    // code here 
}); 

in pianura vecchio JavaScript ?

Fondamentalmente voglio eseguire una funzione ogni volta che si fa clic su un tag a ma non ho la possibilità di caricare jQuery nella pagina per farlo nel modo sopra così ho bisogno di sapere come farlo usando JavaScript.

risposta

39

di lavoro Esempio: http://jsfiddle.net/6ZNws/

Html

<a href="something">CLick Here</a> 
<a href="something">CLick Here</a> 
<a href="something">CLick Here</a> 

Javascript:

var anchors = document.getElementsByTagName('a'); 
for(var z = 0; z < anchors.length; z++) { 
    var elem = anchors[z]; 
    elem.onclick = function() { 
     alert("hello"); 
     return false; 
    }; 
} 
+1

+1 Ti consiglierei di terminare la funzione * espressioni * con un ';' comunque. – pimvdb

+0

Whoop buona cattura. –

+0

Non sono d'accordo. IMHO puoi distruggere la precedente funzione associata. Usare "addEventListener" è molto meglio, penso. –

5

Qui si va:

[].forEach.call(document.querySelectorAll('a'), function (a) { 
    a.addEventListener('click', function() { 
     // code here 
    }, false); 
}); 

Demo online:http://jsfiddle.net/8Lvzc/3/

(non funziona in IE8)

Inoltre, vi consiglio la delega evento ...

+2

Avete un motivo per non usare '[] .forChiavo (...)'? – pimvdb

+0

@pimvdb Bene, 'call' non è adatto poiché una funzione deve essere passata in' forEach'. Si dovrebbe usare 'apply', quindi:' [] .forEach.apply (..., [function() {}]); '. La notazione '[function() {}]' è un po 'strana per i miei gusti ... –

+3

Intendo http://jsfiddle.net/8Lvzc/1/. – pimvdb

30
element.addEventListener('click', function() { ... }, false); 

Devi individuare gli elementi un d creare un loop per collegarli.

6
document.getElementById('elementID').onclick = function(){ 
     //click me function! 
} 
+0

Ah ... avrei dovuto precisare che non conoscevo i tag "a" o gli ID in anticipo quindi è sufficiente dire "Per QUALSIASI volta che un tag ha fatto clic ....." –

1

Questa assegna una funzione onclick per ogni elemento a.

var links = document.getElementsByTagName("a"); 
var linkClick = function() { 
    //code here 
}; 

for(var i = 0; i < links.length; i++){ 
    links[i].onclick = linkClick; 
} 

È possibile vederlo in azione here.

11

provare il seguente

var clickHandler = function() { 
    // Your click handler 
}; 

var anchors = document.getElementsByTagName("a"); 
for (var i = 0; i < anchors.length; i++) { 
    var current = anchors[i]; 
    current.addEventListener('click', clickHandler, false); 
} 

Nota: Come Ӫ _._ Ӫ sottolineato questo non funzionerà su IE8 ed inferiore in quanto non supporta addEventListener.

Su IE8 è possibile utilizzare quanto segue per iscriversi allo onclick. Non è un sostituto perfetto in quanto richiede a tutti di essere cooperativa, ma può essere in grado di aiutarti

var subscribeToOnClick = function(element) { 
    if (element.onclick === undefined) { 
    element.onclick = clickHandler; 
    } else { 
    var saved = element.onclick; 
    element.onclick = function() { 
     saved.apply(this, arguments); 
     clickHandler.apply(this, arguments); 
    } 
    } 
} 

for (var i = 0; i < anchors.length; i++) { 
    var current = anchors[i]; 
    subscribeToOnClick(current); 
} 
+2

Non creare funzioni all'interno di un ciclo. È preferibile creare la funzione all'esterno del ciclo e fare riferimento alla funzione all'interno del ciclo. –

+0

@PeterOlson principalmente stavo cercando di replicare lo stile della domanda originale.Lo aggiornerò per essere più corretto in questo senso – JaredPar

+0

Probabilmente si dovrebbe notare che IE8 e inferiori non supportano 'addEventListener'. – user113716

Problemi correlati