Zdarzenie dostępu, aby wywołać funkcję disabledefault z funkcji niestandardowej pochodzącej z atrybutu onclick tagu

119

Mam takie linki:

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

I chciałbym zrobić w preventDefault()środku myfunc(), ponieważ #zostanie dodane w pasku adresu po kliknięciu linku (bez robienia return false;lub href='javascript:void(0);')

czy to możliwe? Czy mogę umieścić wydarzenie w środkumyfunc()

Omu
źródło
6
Co jest nie tak z powrotem false?
Alex
5
zatrzymuje również propagację
Omu
4
return falsezatrzymuje tylko propagację w ramach jQuery.
cruzanmo

Odpowiedzi:

157

Wierzę, że możesz przekazać eventfunkcję inline, która będzie eventobiektem dla podniesionego zdarzenia w przeglądarkach zgodnych z W3C (tj. Starsze wersje IE będą nadal wymagały wykrywania wewnątrz funkcji obsługi zdarzeń, aby się przyjrzeć window.event).

Szybki przykład .

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

  1. Uruchom go tak, jak jest i zwróć uwagę, że link nie przekierowuje do Google po alercie.
  2. Następnie zmień eventprzekazany do programu onclickobsługi na coś innego, np. eKliknij uruchom, a następnie zwróć uwagę, że przekierowanie ma miejsce po alercie (okienko wyników staje się białe, demonstrując przekierowanie).
Russ Cam
źródło
5
ok, widzę, że wszystko, co musiałem zrobić, to umieścić mój parametr na drugim miejscumyfunc(event, {a:123, b:"asdas"})
Omu
1
@Omu Przekazany argument, event, może znajdować się w dowolnym miejscu, nie musi być pierwszym, o ile znajduje się we właściwym miejscu listy zdefiniowanych parametrów funkcji. Na przykład function myfunc(o, e) {...}można go nazwać jako myfunc({a:1, b:'hi'}, event).
cateyes
2
Myślę, że nie musisz jawnie przekazywać i przechwytywać obiektu zdarzenia. Możesz po prostu odnieść się do tego w funkcji. Czy ktoś może potwierdzić? Chodzi mi o to, że ten kod bez zdarzenia powinien również działać:function sayHi() { event.preventDefault(); alert("hi"); }
K Vij
111

Najprostszym rozwiązaniem jest po prostu:

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

Właściwie jest to dobry sposób na pomijanie pamięci podręcznej dokumentów z rezerwą dla przeglądarek bez obsługi JS (bez pomijania pamięci podręcznej, jeśli nie ma JS)

<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">

Jeśli włączony jest JavaScript, otwiera plik PDF z ciągiem zapytania usuwającym pamięć podręczną, jeśli nie, otwiera plik PDF.

JuLo
źródło
Możesz po prostu użyć technologii po stronie serwera, aby ponownie napisać ten link, jeśli chcesz tylko zniszczyć pamięć podręczną.
otwarty
Byłoby lepiej, ale nie mam dostępu do kodu po stronie serwera. Pracuję z tym, co mam.
JuLo
11

Spróbuj tego:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>
Suave Nti
źródło
wymaga to tagu <script> dla każdego zdarzenia kliknięcia, co sprawia, że ​​kod jest bardziej skomplikowany.
somid3
Wymaga również jQuery, które chociaż może być obecne, nie powinno być warunkiem wstępnym.
Irregular Shed
Również się tutaj nie zgadzam, prosta analiza funkcji wbudowanej jest bardziej efektywna i zawiera mniej kodu.
Shannon Hochkins,
1
@ somid3, natomiast jQuery nie jest konieczne , jeśli martwisz się o wydajność, można użyć jednego delegowanego obsługi zdarzenia tak, że jesteś dołączenie tylko jednego słuchacza dla wszystkich kotwic na stronie tak: $("body").on("click","a",function(e) { e.preventDefault() });. W obu przypadkach żadne rozwiązanie nie wpłynie znacząco na wydajność.
KyleMit
7
<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>
Aram Mkrtchyan
źródło
2
Dotyczy to każdego zakotwiczenia i zepsuje wszystkie linki, wymaga również wstawienia javascript na stronie, a także jQuery.
Shannon Hochkins
Ponadto w przypadku korzystania z jQuery return falsenie jest zalecane, ponieważ uniemożliwi to również uruchomienie wszystkich innych programów obsługi zdarzeń w tym elemencie i zatrzyma zdarzenie przed propagowaniem do wyższych elementów.
Stijn de Witt
6

Dodaj unikalną klasę do linków i javascript, który zapobiega domyślnym linkom z tą klasą:

<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
źródło
Ciekawe podejście do globalnego rozwiązania.
AFract
5

Czy nie możesz po prostu usunąć atrybutu href ze znacznika a?

Leigh Ciechanowski
źródło
1
tak, to też jest opcja, chociaż domyślnie link nie będzie miał podkreślenia, a jeśli javascript jest wyłączony, nie będzie href, do którego można przejść
Omu
4

Myślę, że kiedy używamy onClick, chcemy zrobić coś innego niż default. Tak więc dla wszystkich linków z onClick:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});
Ronan
źródło
2

Prosty!

onclick="blabla(); return false"
Jake
źródło
2

Możesz uzyskać dostęp do wydarzenia z onclick w następujący sposób:

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

a w funkcji javascript radzę dodać tę instrukcję pierwszego wiersza jako:

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

następnie użyj wszędzie e jako zmiennej zdarzenia

gdarcan
źródło
0

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

Lub zwróć false ze swojej metody.

rahul singh Chauhan
źródło
1
W jaki sposób Twoja odpowiedź różni się od odpowiedzi, które już zostały udzielone?
Dimitar Spasovski
Otrzymałem adres URL, aby uzyskać większą jasność w zadanym pytaniu
rahul singh Chauhan
0

Bez żadnej biblioteki JS ani jQuery. Aby otworzyć ładne okno podręczne, jeśli to możliwe. Nie udaje się bezpiecznie otworzyć normalnego łącza.

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

I funkcja pomocnicza:

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
źródło