¿Cómo puedo desactivar HREF si se ejecuta onclick?

Tengo un ancla con ambos HREF y ONCLICKatributos establecidos. Si se hace clic y Javascript está habilitado, quiero que solo se ejecute ONCLICKe ignore HREF. Del mismo modo, si Javascript está deshabilitado o no es compatible, quiero que siga la HREFURL e ignore ONCLICK. A continuación se muestra un ejemplo de lo que estoy haciendo, que ejecutaría el JS y seguiría el enlace al mismo tiempo (generalmente el JS se ejecuta y luego la página cambia):

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

¿Cuál es la mejor manera de hacer esto?

Espero una respuesta de Javascript, pero aceptaré cualquier método siempre que funcione, especialmente si esto se puede hacer con PHP. Ya he leído " un enlace href se ejecuta y redirige la página antes de que la función onclick de javascript pueda finalizar ", pero solo lo retrasa HREF, pero no lo desactiva por completo. También busco algo mucho más sencillo.

Puede usar la primera solución sin editar, si coloca return primero en el onclickatributo:

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

Ejemplo: https://jsfiddle.net/FXkgV/289/

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

Si devuelve falso, debería evitar la acción predeterminada (ir al href).

Editar: Lo siento, eso no parece funcionar, puedes hacer lo siguiente en su lugar:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

Simplemente deshabilite el comportamiento predeterminado del navegador usando preventDefaulty pase el eventdentro de su 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>

con jQuery:

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

con JavaScript

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

Asignas clase .ignore-clicka tantos elementos como quieras y los clics en esos elementos serán ignorados

Puede utilizar este sencillo código:

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

Es más simple si pasa un parámetro de evento como este:

<a href="#" onclick="yes_js_login(event);">link</a>

function yes_js_login(e) {
    e.stopImmediatePropagation();
}

Esto podría ayudar. No se necesita JQuery

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

Este código hace lo siguiente: pasa el vínculo relativo al visor de documentos de Google

1. Obtenga la versión de enlace completo del ancla this.href
2. abre el enlace en la nueva ventana.

Entonces, en su caso, esto podría funcionar:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">

Resolví una situación en la que necesitaba una plantilla para el elemento que manejaría alternativamente una URL normal o una llamada de JavaScript, donde la función js necesita una referencia al elemento de llamada. En javascript, "esto" funciona como una autorreferencia solo en el contexto de un elemento de formulario, por ejemplo, un botón. No quería un botón, solo la aparición de un enlace normal.

Ejemplos:

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

Los atributos href y onClick tienen los mismos valores, excepto que agrego "return false" en onClick cuando es una llamada javascript. Tener "return false" en la función llamada no funcionó.

Esto funcionó para mí:

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

En mi caso, tuve una condición cuando el usuario hace clic en el elemento "a". La condición era:

Si otra sección tiene más de diez elementos, el usuario no debe ser redirigido a otra página.

Si otra sección tiene menos de diez elementos, entonces el usuario debe ser redirigido a otra página.

La funcionalidad de los elementos "a" depende del otro componente. El código dentro del evento de clic es el siguiente:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}