Comment empêcher la gestion des événements par défaut dans une méthode onclick?

88

Comment empêcher le défaut dans une méthode onclick? J'ai une méthode dans laquelle je passe également une valeur personnalisée

<a href="#" onclick="callmymethod(24)">Call</a>
function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
}
coure2011
la source

Réponses:

106

Laissez votre rappel revenir falseet transmettez-le au onclickgestionnaire:

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

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

Pour créer du code maintenable , cependant, vous devez vous abstenir d'utiliser "Javascript en ligne" (c'est-à-dire: du code qui est directement dans la balise d'un élément) et modifier le comportement d'un élément via un fichier source Javascript inclus (il est appelé Javascript discret ).

La majoration:

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

Le code (fichier séparé):

// 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 */
});
Linus Kleen
la source
1
@AamirAfridi Oui, ça marche. Vous devez ajuster votre violon et passer onLoadedà no wrap. Ou écrivez simplement votre propre balisage .html à la place.
Linus Kleen
1
Veuillez voir la réponse ci-dessous! "A mon avis, la réponse est fausse! Il a demandé event.preventDefault (); quand vous retournez simplement false; il appelle event.preventDefault (); AND event.stopPropagation (); aussi!"
Ravindranath Akila
1
Pour être fastidieux, la question du PO ne mentionne jamais preventDefault, la question est de savoir comment «empêcher [le] clic par défaut» .
Linus Kleen
1
@LinusKleen, dites aussi s'il vous plaît, comment empêcher le clic dans ce cas
vp_arth
1
@vp_arth Utilisez "CSS click through" pour cela. Regardez cette question .
Linus Kleen
46

À mon avis, la réponse est fausse! Il a demandé event.preventDefault();quand vous retournez simplement faux; ça appelle event.preventDefault();ET event.stopPropagation();aussi!

Vous pouvez le résoudre par ceci:

<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();
}
Wawa
la source
6
Vous comptez sur window.eventce qui n'est pas toujours disponible sur tous les navigateurs.
Linus Kleen
Modifié pour ajouter: event = event || window.event;
Nigel Fds
45

Essayez ceci (mais veuillez utiliser des boutons pour de tels cas si vous n'avez pas de hrefvaleur valide pour une dégradation progressive )

<a href="#" onclick="callmymethod(24); return false;">Call</a>
Aamir Afridi
la source
1
gentil tout simplement le meilleur. Je veux la même chose pour event.preventDefault ();
Sameer Kazi
Cela a fonctionné pour moi, mais pouvez-vous expliquer pourquoi vous devez return false; ? À quoi retournons-nous même faux?
Kolob Canyon
vous pouvez simplement retourner au lieu de retourner false, renvoyer évitera le lien de naviguer vers href. Techniquement, nous devrions utiliser le bouton pour de tels cas.
Aamir Afridi
12

Vous pouvez attraper l'événement et le bloquer avec preventDefault () - fonctionne avec du Javascript pur

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

Placez simplement "javascript: void (0)", à la place de "#" dans la balise href

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

Cela a fonctionné pour moi

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

Il serait trop fastidieux de modifier les utilisations des fonctions dans toutes les pages html en return false.

Voici donc une solution testée qui ne corrige que la fonction elle-même:

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

Cela empêche correctement IE6, IE11 et le dernier Chrome de visiter une href="#"fois le gestionnaire d'événements onclick terminé.

Crédits:

Vadzim
la source
0

Si vous avez besoin de le mettre dans l'étiquette. Ce n'est pas la meilleure solution, mais cela fonctionnera.

Assurez-vous de placer l'événement onclick devant le href. Seulement travaillé pour moi de cette façon.

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

Une autre façon de faire est d'utiliser l' eventobjet à l'intérieur de l'attribut onclick(sans avoir besoin d'ajouter un argument supplémentaire à la fonction pour passer l'événement)

function callmymethod(myVal){
    console.log(myVal);
}
<a href="#link" onclick="event.preventDefault();callmymethod(24)">Call</a>

h3t1
la source
-3

Donnez une classe ou un id à l'élément et utilisez la fonction jquery unbind ();

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