Zugriffsereignis zum Aufrufen von verhinderungsdefault von einer benutzerdefinierten Funktion, die vom onclick-Attribut des Tags stammt

118

Ich habe solche Links:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

Und ich möchte ein preventDefault()Inside machen myfunc(), weil ein #in der Adressleiste hinzugefügt wird, wenn auf den Link geklickt wird (ohne zu tun return false;oder href='javascript:void(0);')

Ist das möglich? Kann ich die Veranstaltung ins Haus bekommen?myfunc()

Omu
quelle
6
Was ist falsch an return false?
Alex
5
es stoppt auch die Ausbreitung
Omu
4
return falsestoppt nur die Weitergabe innerhalb von jQuery.
Cruzanmo

Antworten:

156

Ich glaube, Sie können eventdie Funktion inline übergeben, die das eventObjekt für das ausgelöste Ereignis in W3C-kompatiblen Browsern sein wird (dh ältere Versionen des IE erfordern weiterhin eine Erkennung innerhalb Ihrer Ereignishandlerfunktion, um sie anzuzeigen window.event).

Ein kurzes Beispiel .

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}
<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. Führen Sie es so aus, wie es ist, und beachten Sie, dass der Link nach der Warnung nicht zu Google weitergeleitet wird.
  2. Ändern Sie dann die eventan den onclickHandler übergebene Option in etwas anderes wie e, klicken Sie auf Ausführen und beachten Sie, dass die Umleitung nach der Warnung erfolgt (der Ergebnisbereich wird weiß und zeigt eine Umleitung an).
Russ Cam
quelle
5
ok, ich sehe alles was ich tun musste ist meinen Parameter an zweiter Stelle zu setzenmyfunc(event, {a:123, b:"asdas"})
Omu
1
@Omu Das übergebene Argument event kann sich an einer beliebigen Stelle befinden und muss nicht das erste sein, solange es sich an der richtigen Stelle der definierten Parameterliste für die Funktion befindet. Zum Beispiel kann function myfunc(o, e) {...}es dann als aufgerufen werden myfunc({a:1, b:'hi'}, event).
Kateyes
2
Ich denke, Sie müssen das Ereignisobjekt nicht explizit übergeben und erfassen. Sie können einfach in der Funktion darauf verweisen. Kann jemand bitte bestätigen? Ich meine, dieser Code ohne das Ereignis sollte auch funktionieren:function sayHi() { event.preventDefault(); alert("hi"); }
K Vij
110

Die einfachste Lösung ist einfach:

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

Es ist eigentlich eine gute Möglichkeit, Cache-Busting für Dokumente mit einem Fallback für keine JS-fähigen Browser durchzuführen (kein Cache-Busting, wenn kein JS vorhanden ist).

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

Wenn JavaScript aktiviert ist, wird die PDF-Datei mit einer Cache-Busting-Abfragezeichenfolge geöffnet. Andernfalls wird nur die PDF-Datei geöffnet.

JuLo
quelle
Könnte einfach serverseitige Technologie verwenden, um diesen Link neu zu schreiben, wenn Sie nur nach Cache-Busting suchen.
Mpen
Es wäre besser, aber ich habe keinen Zugriff auf den serverseitigen Code. Arbeiten mit dem, was ich habe.
JuLo
11

Versuche dies:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>
Suave Nti
quelle
Dies erfordert ein <script> -Tag für jedes Klickereignis, wodurch der Code komplizierter wird.
Somid3
Es erfordert auch jQuery, was zwar vorhanden sein sollte, aber keine Voraussetzung sein sollte.
Unregelmäßiger Schuppen
Auch hier nicht einverstanden: Eine einfache Analyse einer Inline-Funktion ist effektiver und weniger Code.
Shannon Hochkins
1
@ somid3, obwohl jQuery nicht erforderlich ist , können Sie, wenn Sie sich Sorgen um die Leistung machen, einen einzelnen delegierten Ereignishandler verwenden, sodass Sie nur einen einzigen Listener für alle Anker auf der Seite wie folgt anhängen : $("body").on("click","a",function(e) { e.preventDefault() });. In beiden Fällen wird keine der beiden Lösungen die Leistung erheblich beeinflussen.
KyleMit
7
<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>
Aram Mkrtchyan
quelle
2
Dies gilt für jeden Anker und unterbricht alle Links. Außerdem muss Javascript auf der Seite sowie in jQuery eingefügt werden.
Shannon Hochkins
Wenn Sie jQuery verwenden, return falsewird dies nicht empfohlen, da dadurch auch verhindert wird, dass alle anderen Ereignishandler für dieses Element ausgeführt werden, und verhindert wird, dass das Ereignis zu höheren Elementen aufsteigt.
Stijn de Witt
6

Fügen Sie den Links eine eindeutige Klasse und ein Javascript hinzu, das die Standardeinstellung für Links mit dieser Klasse verhindert:

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>
aaandre
quelle
Interessanter Ansatz für eine globale Lösung.
Nach dem
5

Können Sie nicht einfach das href-Attribut aus dem a-Tag entfernen?

Leigh Ciechanowski
quelle
1
Ja, das ist auch eine Option, obwohl der Link standardmäßig nicht unterstrichen ist und wenn Javascript deaktiviert ist, wird es keine Hr geben
Omu
4

Ich denke, wenn wir onClick verwenden, möchten wir etwas anderes als die Standardeinstellung tun. Also, für alle Ihre Links mit onClick:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});
Ronan
quelle
2

Einfach!

onclick="blabla(); return false"
Jake
quelle
2

Sie können von onclick wie folgt auf das Ereignis zugreifen:

<button onclick="yourFunc(event);">go</button>

und bei Ihrer Javascript-Funktion ist mein Rat, diese Aussage in der ersten Zeile wie folgt hinzuzufügen:

function yourFunc(e) {
    e = e ? e : event;
}

Verwenden Sie dann überall e als Ereignisvariable

gdarcan
quelle
0

e.preventDefault (); von https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

Oder haben Sie false von Ihrer Methode zurückgegeben.

rahul singh Chauhan
quelle
1
Wie unterscheidet sich Ihre Antwort von den bereits bereitgestellten Antworten?
Dimitar Spasovski
Ich erhielt eine URL für mehr Klarheit auf die gestellte Frage
Rahul Singh Chauhan
0

Ohne JS-Bibliothek oder jQuery. Wenn möglich, öffnen Sie ein schönes Popup-Fenster. Fehler beim normalen Öffnen der Verbindung.

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

Und die Hilfsfunktion:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}
Martin Večeřa
quelle