¿Cómo evitar el manejo de eventos predeterminado en un método onclick?

¿Cómo evitar el incumplimiento en un método onclick? Tengo un método en el que también paso un valor personalizado

<a href="#" onclick="callmymethod(24)">Call</a>

function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
}

Deje que su devolución de llamada regrese falsey páselo al onclickcontrolador:

<a href="#" onclick="return callmymethod(24)">Call</a>

function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
    return false;
}

Sin embargo, para crear código mantenible , debe abstenerse de usar "Javascript en línea" (es decir, código que está directamente dentro de la etiqueta de un elemento) y modificar el comportamiento de un elemento a través de un archivo fuente de Javascript incluido (se llama Javascript no intrusivo ).

El margen de beneficio:

<a href="#" id="myAnchor">Call</a>

El código (archivo separado):

// Code example using Prototype JS API
$('myAnchor').observe('click', function(event) {
    Event.stop(event); // suppress default click behavior, cancel the event
    /* your onclick code goes here */
});

¡En mi opinión, la respuesta es incorrecta! Preguntó por event.preventDefault();cuando simplemente devuelva falso; también llama a event.preventDefault();AND event.stopPropagation();!

Puedes resolverlo por esto:

<a href="#" onclick="callmymethod(event, 24)">Call</a>

function callmymethod(e, myVal){
    //doing custom things with myVal

    //here I want to prevent default
    e = e || window.event;
    e.preventDefault();
}

Intente esto (pero use botones para tales casos si no tiene un hrefvalor válido para la degradación elegante )

<a href="#" onclick="callmymethod(24); return false;">Call</a>

Puede capturar el evento y luego bloquearlo con preventDefault () - funciona con Javascript puro

document.getElementById("xyz").addEventListener('click', function(event){
    event.preventDefault();
    console.log(this.getAttribute("href"));
    /* Do some other things*/
});

Simplemente coloque "javascript: void (0)", en lugar de "#" en la etiqueta href

<a href="javascript:void(0);" onclick="callmymethod(24)">Call</a>

Esto funcionó para mi

<a href="javascript:;" onclick="callmymethod(24); return false;">Call</a>

Puedes usar:

event.stopPropagation();

https://dom.spec.whatwg.org/#dom-event-stoppropagation

Sería demasiado tedioso alterar los usos de las funciones en todas las páginas html para return false.

Así que aquí hay una solución probada que parchea solo la función en sí:

function callmymethod(myVal) {
    // doing custom things with myVal

    // cancel default event action
    var event = window.event || callmymethod.caller.arguments[0];
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

    return false;
}    

Esto evita correctamente que IE6, IE11 y la última versión de Chrome visiten href="#"después de que se complete el controlador de eventos onclick.

Créditos:

• ¿Cómo averigua la función de llamada en JavaScript?
• La función event.preventDefault () no funciona en IE

Si necesita ponerlo en la etiqueta. No es la mejor solución, pero funcionará.

Asegúrese de poner el evento onclick delante del href. Solo funcionó para mi de esta manera.

<a onclick="return false;" href="//www.google.de">Google</a>

Otra forma de hacerlo es usar el eventobjeto dentro del atributo onclick(sin la necesidad de agregar un argumento adicional a la función para pasar el evento)

function callmymethod(myVal){
    console.log(myVal);
}

<a href="#link" onclick="event.preventDefault();callmymethod(24)">Call</a>

Dale una clase o id al elemento y usa la función jquery unbind ();

$(".slide_prevent").click(function(){
                $(".slide_prevent").unbind();
              });