Jak mogę wyłączyć HREF, jeśli onclick jest wykonywany?

98

Mam kotwicy z obu HREF i ONCLICKatrybuty ustawione. Jeśli kliknięto, a Javascript jest włączony, chcę, aby był tylko wykonywany ONCLICKi ignorowany HREF. Podobnie, jeśli JavaScript jest wyłączony lub nieobsługiwany, chcę, aby podążał za HREFadresem URL i ignorował ONCLICK. Poniżej znajduje się przykład tego, co robię, co spowodowałoby wykonanie JS i jednoczesne podążanie za linkiem (zwykle JS jest wykonywany, a następnie strona się zmienia):

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

jak najlepiej to zrobić?

Mam nadzieję na odpowiedź JavaScript, ale zaakceptuję każdą metodę, o ile będzie działać, zwłaszcza jeśli można to zrobić za pomocą PHP. Czytałem już „ link href uruchamia i przekierowuje stronę, zanim funkcja onclick javascript jest w stanie zakończyć ”, ale to tylko opóźnia HREF, ale nie wyłącza całkowicie. Szukam też czegoś znacznie prostszego.

Supuhstar
źródło
4
Użyłbym do zakotwiczenia jednego z href, a drugiego bez. Po załadowaniu strony sprawdź, czy włączony jest javascript, jeśli jest, pokaż poprawną kotwicę, w przeciwnym razie pokaż drugą.
ewein
1
@ewein Why? To brzmi jak bardzo dużo znaczników dla prostej funkcji.
Supuhstar

Odpowiedzi:

61

Możesz użyć pierwszego nieedytowanego rozwiązania, jeśli umieścisz return jako pierwszy w onclickatrybucie:

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Przykład: https://jsfiddle.net/FXkgV/289/

elproduc3r
źródło
1
Podoba mi się, jak to jest czyste! Jednak przyjęte rozwiązanie daje mi większą kontrolę nad tym, czy HREF jest ignorowany
Supuhstar
W ciągu ostatnich kilku lat zmieniłem zdanie; to jest lepsze rozwiązanie
Supuhstar
Jakie to zdrowe!
DrunkDevKek
Ale to nie działa z reakcją JSX. Czy to zadziała?
Coder
1
zaoszczędziło to dużo czasu.
Mark Lozano
61
    yes_js_login = function() {
         // Your code here
         return false;
    }

Jeśli zwrócisz false, powinno to uniemożliwić domyślną akcję (przejście do href).

Edycja: Przepraszamy, ale to nie działa, możesz zamiast tego wykonać następujące czynności:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>
Chris Bier
źródło
1
Edytowana odpowiedź nie odpowiada na pytanie, ponieważ usuwa rzeczywisty link.
Itai Bar-Haim
12
alternatywnie używaj onclick="return yes_js_login();"z yes_js_loginpowrotemfalse
Uwe Kleine-König
1
@cgogolin zobacz moją odpowiedź.
Gabe Rogan
dla każdego, kto jeszcze utknął, może dodać tę linięevent.stopImmediatePropagation()
didxga
35

Po prostu wyłącz domyślne zachowanie przeglądarki za pomocą preventDefaulti przekaż eventw swoim kodzie HTML.

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}
Buksy
źródło
1
powrót false nie działał w polimerze ... powyższe rozwiązanie zadziałało ... Dzięki
Paras Sachapara
16
<a href="http://www.google.com" class="ignore-click">Test</a>

z jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

z JavaScriptem

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

Przypisujesz klasę .ignore-clickdo dowolnej liczby elementów, a kliknięcia na te elementy zostaną zignorowane

Andrzej
źródło
To świetne rozwiązanie! Użyłem go do przycisków, które mam, że po kliknięciu pseudoklasa .btn-loadingjest dodawana do klikniętego linku, a jeśli się powiedzie, znacznik wyboru (w przypadku błędu X) zastępuje animację ładowania. Nie chcę, aby w niektórych przypadkach można było ponownie kliknąć przycisk (zarówno z powodu sukcesu, jak i błędu), dzięki temu mogę w prosty $(elemnent).addClass('disabled')i łatwy sposób osiągnąć funkcjonalność, której szukałem w elegancki sposób!
Matthew Mathieson,
14

Możesz użyć tego prostego kodu:

<a href="" onclick="return false;">add new action</a><br>
mishanon
źródło
5

Jest to prostsze, jeśli podasz taki parametr zdarzenia:

<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
    e.stopImmediatePropagation();
}
Trigon219
źródło
1
Na mnie to nie działa. Muszę użyć e.preventDefault ()
Milan Simek
2

To może pomóc. Nie potrzeba JQuery

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

Ten kod wykonuje następujące czynności: Przekazuje względny link do przeglądarki Dokumentów Google

  1. Pobierz pełną wersję linku kotwicy przez this.href
  2. otwórz link w nowym oknie.

Więc w twoim przypadku może to zadziałać:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">
marlo
źródło
1

Rozwiązałem sytuację, w której potrzebowałem szablonu dla elementu, który obsługiwałby alternatywnie zwykły adres URL lub wywołanie javascript, gdzie funkcja js potrzebuje odwołania do elementu wywołującego. W javascript "this" działa jako odniesienie do samego siebie tylko w kontekście elementu formularza, np. Przycisku. Nie chciałem przycisku, tylko wygląd zwykłego linku.

Przykłady:

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

Atrybuty href i onClick mają te same wartości, z wyjątkiem dodania „return false” w onClick, gdy jest to wywołanie javascript. Funkcja „return false” w wywołanej funkcji nie działała.

Bo Johanson
źródło
dlaczego są dwa? Dlaczego umieszczasz JS w HREF?
Supuhstar
Supuhstar, rzeczywisty kod jest dynamiczny, javascript i wygeneruje element <a> dla kilkuset elementów, które są zdefiniowane zewnętrznie. Każdy element będzie albo określał statyczny adres łącza, a wygenerowany element <a> powinien używać zwykłego „zachowania href”. Lub też dla elementu określone jest wywołanie funkcji javascript, w którym to przypadku zachowanie elementu <a> jest obliczane na podstawie kontekstu elementu. W kodzie generatora <a> chciałem po prostu skopiować wszystko, co jest określone dla każdego elementu, bez testowania, czy jest to adres linku, czy wywołanie funkcji javascript.
Bo Johanson
Nie rozumiem, jak to odpowiada na moje pytanie. Kto powiedział, że chcę kilkaset linków? Naprawdę nie rozumiem sensu tego wszystkiego, ani nawet połowy tego, co właśnie powiedziałeś.
Supuhstar
1

To zadziałało dla mnie:

<a href="" onclick="return false;">Action</a>
Zero
źródło
1
Dziękuję za odpowiedź i witamy w Stack Exchange! Niestety, nie wydaje się to dodawać żadnej nowej wiedzy, ponieważ wydaje się, że poprzednie odpowiedzi już to sugerują. Jeśli się zgadzasz, lepiej je głosować. Jeśli się nie zgadzasz, zmień swoją odpowiedź, aby Twoja nowa wiedza wyszła na jaw!
Supuhstar
0

W moim przypadku miałem warunek, w którym użytkownik kliknął element „a”. Warunkiem było:

Jeśli inna sekcja zawierała więcej niż dziesięć pozycji, użytkownik nie powinien być przekierowywany na inną stronę.

Jeśli inna sekcja zawierała mniej niż dziesięć pozycji, użytkownik powinien zostać przekierowany na inną stronę.

Funkcjonalność elementów „a” zależy od drugiego składnika. Kod w przypadku kliknięcia jest następujący:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}
Jorge Santos Neill
źródło