it-swarm.com.de

jQuery-Hyperlinks - href-Wert?

Auf meiner Website verwende ich jQuery, um die Ereignisse von Elementen, nämlich Hyperlinks, zu verknüpfen. Da diese Hyperlinks nur Aktionen auf der aktuellen Seite ausführen und nirgendwohin führen, habe ich ein href-Attribut von "#" eingefügt:

<a href="#">My Link</a>

In einigen Browsern führt dies jedoch zu einem Bildlauf nach oben, was offensichtlich unerwünschtes Verhalten darstellt. Ich habe versucht, einen leeren href-Wert zu verwenden oder einen zu enthalten, aber die Maus wechselt beim Schweben nicht zum Handcursor.

Was soll ich da reinlegen?

45
Tom
$('a').click(function (event) 
{ 
     event.preventDefault(); 
     //here you can also do all sort of things 
});

Dann können Sie jede href angeben, was immer Sie möchten, und jQuery löst die preventDefault()-Methode aus und Sie werden nicht an diesen Ort weitergeleitet.

50

Diese "Anker", die nur dazu dienen, ein Klickereignis bereitzustellen, aber nicht tatsächlich mit anderen Inhalten verknüpft sind, sollten wirklich button elements sein, weil sie es wirklich sind.

Es kann wie folgt gestaltet werden:

<button style="border:none; background:transparent; cursor: pointer;">Click me</button>

Und natürlich können Klick-Events an Schaltflächen angehängt werden, ohne dass der Browser an die Spitze springen muss und ohne Javascript hinzuzufügen, z. B. onclick = "return false;" oder event.preventDefault ().

39
talentedmrjones

Sie sollten wirklich einen echten Link dort einfügen. Ich möchte nicht wie ein Pedant klingen. JQuery und Ajax sollten immer das letzte sein, was Sie implementieren. Wenn Sie einen Link haben, der nirgendwohin geht, machen Sie es nicht richtig. 

Ich zerbreche deine Eier nicht, ich meine das mit der besten Absicht. 

36
gargantuan

Warum einen <a href> verwenden? Ich löse es so:

<span class='a'>fake link</span>

Und gestalte es mit:

.a {text-decoration:underline; cursor:pointer;}

Mit jQuery können Sie leicht darauf zugreifen:

$(".a").click();

11
bart

Fügen Sie am Ende des Klick-Handlers return false hinzu. Dadurch wird verhindert, dass der Browser-Standard-Handler auftritt, der versucht, die Seite umzuleiten:

$('a').click(function() {
// do stuff
return false;
});
9
roryf

wenn Sie jquery verwenden, möchten Sie möglicherweise nur diejenigen mit einem '#' erreichen.

$('a[href=#]').click(function(){return false;});

wenn Sie die neueste Jquery (1.3.x) verwenden, müssen Sie sie nicht erneut binden, wenn sich die Seite ändert: 

$('a[href=#]').live('click', function(){return false;});
5
djspark

sie sollten <a href="javascript:void(0)" ></a> anstelle von <a href="#" ></a> verwenden. 

4
mohsen

Ich frage mich, warum es vorher niemand gesagt hat: Um zu verhindern, dass <a href="#"> die Dokumentposition nach oben rollt, verwenden Sie einfach <a href="#/">. Das ist nur HTML, keine JQuery nötig. Die Verwendung von event.preventDefault(); ist einfach zu viel!

3
Best

Ich weiß, das ist alt, aber wow, es gibt so eine einfache Lösung.

entfernen Sie die "href" vollständig und fügen Sie einfach eine Klasse hinzu, die Folgendes ausführt:

.no-href { cursor:pointer: }

Und das ist es!

1
Justin

Ich hatte fast dieses Problem und es war sehr täuschend . Ich gebe eine Antwort, falls jemand in meiner gleichen Position landet.

  1. Ich dachte , ich hätte dieses Problem
  2. Aber ich habe return false und Javascript verwendet: void (0);
  3. Dann tauchte immer wieder ein deutlicher Unterschied im Problem auf:
  4. Mir ist aufgefallen, dass es nicht ganz nach oben geht - und meine Problemzone befand sich ganz unten auf der Seite, sodass dieser Sprung seltsam und nervig war.
  5. Mir ist aufgefallen, dass ich fadeIn () [jQuery library] verwende, das für kurze Zeit meinen Inhalt anzeigt: none
  6. Und dann erweiterte mein Inhalt die Reichweite der Seite! Verursachen, was wie ein Sprung aussieht!
  7. Verwenden Sie jetzt versteckte Sichtbarkeitsschalter.

Hoffe das hilft der Person die mit Sprüngen steckt !!

0
amurrell