Antworten:
<a onclick="jsfunction()" href="#">oder
<a onclick="jsfunction()" href="javascript:void(0);">Bearbeiten:
Die obige Antwort ist wirklich keine gute Lösung, da ich seit meinem ersten Posting viel über JS gelernt habe. In der Antwort von EndangeredMassa unten finden Sie Informationen zur besseren Lösung dieses Problems.
Unauffälliges JavaScript, keine Bibliotheksabhängigkeit:
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>hrefwenn ich den Benutzer nicht umleiten und nur Code ausführen möchte? Edit: Ich sehe, dass es leer gelassen werden kann : href="".
onclickEreignis über hinzuzufügen window.onload, als es onclickdirekt in das <a>Tag einzufügen?
<a href="javascript:alert('Hello!');">Clicky</a>EDIT, Jahre später: NEIN! Tu das niemals! Ich war jung und dumm!
Nochmals bearbeiten: Ein paar Leute haben gefragt, warum Sie das nicht tun sollten. Es gibt ein paar Gründe:
Präsentation: HTML sollte sich auf die Präsentation konzentrieren. Das Einfügen von JS in ein HREF bedeutet, dass sich Ihr HTML jetzt irgendwie mit Geschäftslogik befasst.
Sicherheit: Javascript in Ihrem HTML- Code verstößt gegen die Content Security Policy (CSP) . Content Security Policy (CSP) ist eine zusätzliche Sicherheitsebene, mit der bestimmte Arten von Angriffen erkannt und gemindert werden können, einschließlich Cross-Site Scripting (XSS) - und Dateninjektionsangriffen. Diese Angriffe werden für alles verwendet, vom Datendiebstahl bis zur Verunstaltung der Website oder der Verbreitung von Malware. Lesen Sie hier mehr .
Zugänglichkeit: Anker-Tags dienen zum Verknüpfen mit anderen Dokumenten / Seiten / Ressourcen. Wenn Ihr Link nirgendwohin führt, sollte es sich um eine Schaltfläche handeln . Dies erleichtert es Bildschirmlesern, Braille-Terminals usw. erheblich, festzustellen, was gerade passiert, und sehbehinderten Benutzern nützliche Informationen zu geben.
href='#'und alert()in onclick?
Und warum nicht unauffällig mit jQuery:
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>Unauffälliges Javascript hat viele, viele Vorteile. Hier sind die Schritte und die Gründe für die Verwendung.
Der Link wird wie gewohnt geladen:
<a id="DaLink" href="http://host/toAnewPage.html"> hier klicken </a>
Dies ist wichtig, da es für Browser mit nicht aktiviertem Javascript funktioniert oder wenn ein Fehler im Javascript-Code vorliegt, der nicht funktioniert.
Javascript läuft beim Laden der Seite:
window.onload = function(){
document.getElementById("DaLink").onclick = function(){
if(funcitonToCall()){
// most important step in this whole process
return false;
}
}
}Wenn das Javascript erfolgreich ausgeführt wird und möglicherweise der Inhalt der aktuellen Seite mit Javascript geladen wird, wird durch das Zurückgeben von false das Auslösen des Links abgebrochen. Mit anderen Worten: Wenn Sie return false setzen, wird der Link deaktiviert, wenn das Javascript erfolgreich ausgeführt wurde. Während es ausgeführt werden kann, wenn das Javascript nicht funktioniert, erstellen Sie ein nettes Backup, damit Ihr Inhalt so oder so angezeigt wird, für Suchmaschinen und wenn Ihr Code kaputt geht oder auf einem Nicht-Javascript-System angezeigt wird.
Das beste Buch zu diesem Thema ist "Dom Scription" von Jeremy Keith
Oder wenn Sie PrototypeJS verwenden
<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff
Event.stop(event);
}
</script>
<a href="#" id="thelink">This is the link</a>basierend auf @mister_lucky Antwort mit jquery verwenden:
$('#unobtrusive').on('click',function (e) {
e.preventDefault(); //optional
//some code
});HTML Quelltext:
<a id="unobtrusive" href="http://jquery.com">jquery</a>Verwenden Sie einfach Javascript: ---- exemplale
javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })