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()


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).

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.


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>

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>

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>

Ciekawe podejście do globalnego rozwiązania.
AFract

5

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


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();
});


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



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');
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.