Wie kann die Standardereignisbehandlung in einer Onclick-Methode verhindert werden?

87

Wie kann ich die Standardeinstellung bei einer Onclick-Methode verhindern? Ich habe eine Methode, bei der ich auch einen benutzerdefinierten Wert übergebe

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

Antworten:

103

Lassen Sie Ihren Rückruf zurückkehren falseund geben Sie ihn an den onclickHandler weiter:

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

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

Um wartbaren Code zu erstellen , sollten Sie jedoch auf "Inline-Javascript" (dh Code, der sich direkt im Tag eines Elements befindet) verzichten und das Verhalten eines Elements über eine enthaltene Javascript-Quelldatei ( unauffälliges Javascript ) ändern .

Der Aufschlag:

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

Der Code (separate Datei):

// 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
quelle
1
@AamirAfridi Ja, es funktioniert. Sie sollten Ihre Geige anpassen und ändern onLoadedzu no wrap. Oder schreiben Sie stattdessen einfach Ihr eigenes HTML-Markup.
Linus Kleen
1
Bitte siehe Antwort unten! "Meiner Meinung nach ist die Antwort falsch! Er hat nach event.preventDefault () gefragt; wenn Sie einfach false zurückgeben, wird event.preventDefault () aufgerufen; AND event.stopPropagation (); auch!"
Ravindranath Akila
1
Um anspruchsvoll zu sein, wird in der Frage des OP nie erwähnt preventDefault, wie "der Standardklick verhindert werden kann" .
Linus Kleen
1
@ LinusKleen, sagen Sie bitte auch, wie man Klick in diesem Fall verhindert
vp_arth
1
@vp_arth Verwenden Sie dazu "CSS click through". Schau dir diese Frage an .
Linus Kleen
45

Meiner Meinung nach ist die Antwort falsch! Er fragte, event.preventDefault();wann Sie einfach falsch zurückgeben; es ruft event.preventDefault();UND aufevent.stopPropagation(); auch!

Sie können es folgendermaßen lösen:

<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
quelle
6
Sie verlassen sich darauf, window.eventwas nicht immer für alle Browser verfügbar ist.
Linus Kleen
Bearbeitet, um Folgendes hinzuzufügen: event = event || window.event;
Nigel Fds
44

Versuchen Sie dies (aber verwenden Sie in solchen Fällen die Schaltflächen, wenn Sie keinen gültigen hrefWert für eine ordnungsgemäße Verschlechterung haben ).

<a href="#" onclick="callmymethod(24); return false;">Call</a>
Aamir Afridi
quelle
1
schön einfach am besten. Ich möchte dasselbe für event.preventDefault ();
Sameer Kazi
Es hat bei mir funktioniert, aber können Sie erklären, warum Sie müssen return false;? Worauf kehren wir überhaupt falsch zurück?
Kolob Canyon
Sie können einfach zurückkehren, anstatt false zurückzugeben. Durch das Zurückgeben wird vermieden, dass der Link zu href navigiert. Technisch sollten wir in solchen Fällen den Button verwenden.
Aamir Afridi
12

Sie können das Ereignis abfangen und dann mit PreventDefault () blockieren - funktioniert mit reinem Javascript

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

Platzieren Sie einfach "javascript: void (0)" anstelle von "#" im href-Tag

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

Das hat bei mir funktioniert

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

Es wäre zu mühsam, die Funktionsnutzung auf allen HTML-Seiten zu ändern return false .

Hier ist also eine getestete Lösung, die nur die Funktion selbst patcht:

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

Dadurch wird der Besuch von IE6, IE11 und dem neuesten Chrome korrekt verhindert href="#" nach Abschluss des onclick-Ereignishandlers aufgerufen werden.

Credits:

Vadzim
quelle
0

Wenn Sie es in das Tag einfügen müssen. Nicht die beste Lösung, aber es wird funktionieren.

Stellen Sie sicher, dass Sie das Ereignis onclick vor das href stellen. Arbeitete nur für mich so.

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

Eine andere Möglichkeit, dies zu tun, besteht darin, das eventObjekt innerhalb des Attributs zu verwenden onclick(ohne dass der Funktion ein zusätzliches Argument hinzugefügt werden muss, um das Ereignis zu übergeben).

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

h3t1
quelle
-2

Geben Sie dem Element eine Klasse oder ID und verwenden Sie die jquery-Funktion unbind ().

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