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.