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

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.

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/

    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>

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

<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

Możesz użyć tego prostego kodu:

<a href="" onclick="return false;">add new action</a><br>

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

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

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.

To zadziałało dla mnie:

<a href="" onclick="return false;">Action</a>

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