Como evitar a manipulação de eventos padrão em um método onclick?

Como prevenir o default em um método onclick? Tenho um método em que também estou passando um valor personalizado

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

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

Deixe seu retorno de chamada retornar falsee passá-lo para o onclickmanipulador:

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

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

Para criar um código sustentável , no entanto, você deve se abster de usar "Javascript embutido" (ou seja: código que está diretamente dentro da tag de um elemento) e modificar o comportamento de um elemento por meio de um arquivo de origem Javascript incluído (é chamado de Javascript discreto ).

A marcação:

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

O código (arquivo 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 */
});

Na minha opinião, a resposta está errada! Ele perguntou event.preventDefault();quando você simplesmente retornou falso; chama event.preventDefault();AND event.stopPropagation();também!

Você pode resolver assim:

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

Tente isto (mas use botões para tais casos se você não tiver um hrefvalor válido para degradação normal )

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

Você pode capturar o evento e bloqueá-lo com preventDefault () - funciona com Javascript puro

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

Basta colocar "javascript: void (0)", no lugar de "#" na tag href

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

Isso funcionou para mim

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

Você pode usar:

event.stopPropagation();

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

Seria muito tedioso alterar o uso de funções em todas as páginas html para return false.

Portanto, aqui está uma solução testada que corrige apenas a própria função:

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

Isso impede corretamente que o IE6, o IE11 e o Chrome mais recente visitem href="#"após a conclusão do manipulador de eventos onclick.

Créditos:

• Como você descobre a função do chamador em JavaScript?
• A função event.preventDefault () não funciona no IE

Se você precisar colocá-lo na tag. Não é a melhor solução, mas funcionará.

Certifique-se de colocar o evento onclick na frente do href. Só funcionou para mim desta forma.

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

Outra maneira de fazer isso é usar o eventobjeto dentro do atributo onclick(sem a necessidade de adicionar um argumento adicional à função para passar o evento)

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

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

Dê uma classe ou id ao elemento e use a função jquery unbind ();

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