Bir onclick yönteminde varsayılan olay işleme nasıl engellenir?


90

Bir onclick yönteminde varsayılanı nasıl önleyebilirim? Özel bir değeri de ilettiğim bir yöntemim var

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

Yanıtlar:


107

Geri aramanızın geri dönmesine falseve bunu onclickişleyiciye iletmesine izin verin :

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

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

Bununla birlikte, sürdürülebilir kod oluşturmak için , "satır içi Javascript" (yani, doğrudan bir öğenin etiketi içinde bulunan kod) kullanmaktan kaçınmalı ve bir öğenin davranışını, dahil edilen bir Javascript kaynak dosyası (buna göze çarpmayan Javascript denir ) aracılığıyla değiştirmelisiniz.

Biçimlendirme:

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

Kod (ayrı dosya):

// 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 */
});

1
@AamirAfridi Evet, çalışıyor. Eğer keman ayarlayabilir ve değişmelidir onLoadediçin no wrap. Veya bunun yerine kendi .html işaretlemenizi yazın.
— Linus Kleen

1
Lütfen aşağıdaki yanıta bakın! "Bence cevap yanlış! Event.preventDefault () 'u sordu; sadece false döndürdüğünüzde; event.preventDefault (); AND event.stopPropagation ()' ı çağırıyor!"
— Ravindranath Akila

1
Titiz olmak gerekirse, OP'nin sorusu asla bahsetmez preventDefault, soru "varsayılan tıklamanın nasıl önleneceğidir" .
— Linus Kleen

1
@LinusKleen, lütfen bu durumda
— vp_arth

1
@vp_arth Bunun için "CSS tıklama" kullanın. Bak bu soruya .
— Linus Kleen

48

Bence cevap yanlış! event.preventDefault();Ne zaman yanlış döndüğünüzü sordu ; event.preventDefault();VE event.stopPropagation();de çağırıyor !

Bunu şu şekilde çözebilirsiniz:

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

6
window.eventTarayıcılarda her zaman kullanılamayanlara güveniyorsunuz .
— Linus Kleen

Eklenecek şekilde düzenlendi: olay = olay || window.event;
— Nigel Fds

45

Bunu deneyin (ancak bu gibi durumlar hrefiçin uygun bir bozulma için geçerli bir değeriniz yoksa lütfen düğmeleri kullanın )

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

1
güzel en iyisi. Event.preventDefault () için de aynısını istiyorum;
— Sameer Kazi

Benim için çalıştı, ama neden mecbur olduğunu açıklayabilir misin return false;? Hatta neye yanlış dönüyoruz?
— Kolob Canyon

false döndürmek yerine geri dönebilirsiniz, döndürme href'e gitmekten kaçınacaktır. Teknik olarak bu tür durumlarda buton kullanmalıyız.
— Aamir Afridi'nin

12

Olayı yakalayabilir ve ardından preventDefault () ile engelleyebilirsiniz - saf Javascript ile çalışır

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

11

Href etiketindeki "#" yerine "javascript: void (0)" koyun

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

10

Bu benim için çalıştı

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


1

Bunu yapmanın başka bir yolu da eventnesneyi özniteliğin içinde kullanmaktır onclick(olayı iletmek için işleve ek bir argüman eklemeye gerek kalmadan)

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


0

Tüm html sayfalarındaki işlev kullanımlarını .tml olarak değiştirmek çok sıkıcı olurdu return false.

İşte sadece işlevin kendisini yamalayan test edilmiş bir çözüm:

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

Bu, IE6, IE11 ve en son Chrome'un ziyaret edilmesini doğru bir şekilde engeller href="#" onclick olay işleyicisi tamamlandıktan sonra .

Kredi:


0

Etikete eklemeniz gerekiyorsa. En iyi çözüm değil ama işe yarayacak.

Onclick olayını href'in önüne koyduğunuzdan emin olun. Sadece bu yolum için çalıştı.

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

-3

Öğeye bir sınıf veya kimlik verin ve jquery işlevini kullanın unbind ();

$(".slide_prevent").click(function(){
                $(".slide_prevent").unbind();
              });
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.