Soru event.preventDefault () vs false değerini döndür


Belirli bir olayın ardından başka olay işleyicilerinin çalıştırılmasını önlemek istediğimde, iki teknikten birini kullanabilirim. Örneklerde jQuery kullanacağım, ancak bu, düz JS için de geçerlidir:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

Olay yayılımını durdurmanın iki yöntemi arasında anlamlı bir fark var mıdır?

Benim için, return false; bir yöntemi yürütmekten daha basit, kısa ve muhtemelen daha az hatalıdır. Yöntemle doğru kasa, parantez vb.

Ayrıca, yöntemi çağırmak için geri aramada ilk parametreyi tanımlamalıyım. Belki de böyle yapmaktan kaçınmamın bazı nedenleri vardır ve preventDefault yerine? Daha iyi yol nedir?


2652
2017-08-31 11:58


Menşei


JQuery’nin preventDefault yapar değil diğer işleyicilerin çalışmasını engeller. İşte bu stopImmediatePropagation için. - Crescent Fresh
@CrescentFresh, diğer (müteakip olarak bağlı) işleyicilerin ... olayın başlatıldığı DOM düğümünde yürütülmesini engeller. Bu sadece yayılmayı önlüyor. - eyelidlessness
Bunlar "olay yayılmasını durdurmak için iki yöntem" değil? e.preventDefault (); varsayılan eylemi engeller, e.stopPropagation () tarafından yapılan olay yayılımını durdurmaz. - Krinkle
Bu soru ve cevapları jQuery ile ilgilidir. Eğer buraya basit bir javascript cevabı aramak için geldiyseniz, bkz. event.preventDefault () vs false döndür (jQuery yok) - Oriol
preventDefault (), stopPropagation (), stopImmediatePropagation (), false döndür, tüm bu 4 yöntem olayı iptal etmek veya köpürmeyi önlemek için kullanılır. Burada biraz bilgi: markupjavascript.blogspot.in/2013/10/... - Mandeep Pasbola


Cevaplar:


return false itibaren jQuery olay işleyicisinde her ikisini de çağırmakla aynıdır e.preventDefault ve e.stopPropagation geçti jQuery.Event nesnesi.

e.preventDefault() varsayılan olayın oluşmasını engeller, e.stopPropagation() olayın kabarcıklanmasına engel olacak ve return false ikisini de yapacak. Bu davranışın farklı olduğunu unutmayın. normal (jQuery olmayan) olay işleyicileri, özellikle return false yapar değil Olayı kabarcıklanmadan durdur.

Kaynak: John Resig

Bir href tıklamasını iptal etmek için event.preventDefault () öğesini "false döndür" ü kullanarak kullanmanın herhangi bir faydası var mı?


2601
2017-08-31 12:05



return false bir DOM2 işleyicisinden (addEventListener) hiçbir şey yapmaz (ne varsayılanı engeller, ne de köpürmeyi durdurur, Microsoft DOM2-ish işleyicisinden)attachEvent), varsayılanı engeller ama kabarcıklanma değil; bir DOM0 işleyicisinden (onclick="return ..."), varsayılanı engeller. returnöznitelikte) ama kabarcıklanma değil; jQuery olay işleyicisinden, her ikisini de yapar, çünkü bu bir jQuery şeyidir. Burada detaylar ve canlı testler - T.J. Crowder
Burada "Yayılım" ve "Varsayılan" tanımlamak yararlı olacaktır. Bir tanesi onları karıştırmaya devam ediyorum. Bu doğru mu? Yayılma = kodum (ana öğeler için JavaScript olay işleyicileri). Varsayılan = tarayıcı kodu (linkler, metin seçimi, vb.) - Bob Stein
gerçekten kabarcıklanma ile ne anlama geliyor? örnek? - Pablo Escobar
Bunu belirtmek için +1 return false yapar değil jQuery olayı işleyicilerinde olay yayılmasını durdur. diğer bir deyişle <a href="#" onclick="return false">Test</a> yapar değil Olayı kabarcıklanmadan durdur. - Doug S


Benim deneyimime göre, return false kullanarak event.preventDefault () kullanırken en az bir net avantaj var. Tıklama etkinliğini bir bağlantı etiketinde yakaladığınızı varsayalım. Aksi takdirde, kullanıcı mevcut sayfadan ayrılırsa büyük bir sorun olacaktır. Tıklama işleyiciniz tarayıcı gezinmesini önlemek için false döndürürse, yorumlayıcının döndürme ifadesine ulaşma olasılığını ve tarayıcının bağlantı etiketinin varsayılan davranışını yürütmeye devam etmesini sağlar.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

Event.preventDefault () işlevini kullanmanın yararı, işleyicide ilk satır olarak ekleyebilmenizdir; böylece, işlevin son satırına ulaşılmamışsa bile (örneğin çalışma zamanı hatası), bağlantının varsayılan davranışı tetiklenmez. ).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

393
2018-01-22 22:37



Gerçek olsa da, ilerleyici geliştirme yapılırken karşıt davranış genellikle tercih edilir (muhtemelen bir varsayılan eylemi geçersiz kılma olasılığının en büyük sebebi olduğunu düşünüyorum). - meandmycode


Bu, sizin başlık ettiğiniz gibi bir "JavaScript" sorusu değildir; jQuery'nin tasarımı ile ilgili bir soru.

jQuery ve önceden bağlantılı alıntı itibaren John Resig (içinde karim79 en  mesaj) Genel olarak olay işleyicilerinin nasıl çalıştığıyla ilgili bir yanlış anlaşılma gibi görünüyor.

Gerçek: Yanlış döndüren bir olay işleyicisi, bu olay için varsayılan eylemi engeller. Olay yayılımını durdurmaz. Etkinlik işleyicileri, Netscape Navigator'ın eski günlerinden beri her zaman bu şekilde çalıştılar.

MDN'den belgeler nasıl olduğunu açıklar return false bir olay işleyicisinde çalışır

JQuery'de ne olur, olay işleyicileri ile olanla aynı değildir. DOM olay dinleyicileri ve MSIE "ekli" olaylar, tamamen farklı bir konudur.

Daha fazla okumak için, bkz. MSDN üzerinde attachEvent ve W3C DOM 2 Etkinlik belgeleri.


89
2018-06-20 21:31



Ne dersin developer.mozilla.org/en/DOM/event.preventDefault ? - rds
@rds "preventDefault, DOM aracılığıyla etkinliğin daha fazla yayılmasını durdurmaz" diyor. event.stopPropagation bunun için kullanılmalıdır. " - Garrett
bir Cevap yakından ilgili bir soruda, HTML 5'ten önce, bir olay işleyicisinden yanlış bir şey döndürmediği iddia edilir. specced herşeyi yapıyormuş gibi. Şimdi, belki de (anlaşılması zor) özelliklerin yanlış yorumlanması ya da yorumlanabilen tüm tarayıcıların tam olarak belirtilmemesine rağmen return false aynı event.preventDefault(). Ama bilmiyorum; Bunu bir tutam tuz ile almam yeterli. - Mark Amery
Google'daki her javascript arama sonucunun jQuery, +1 hakkında nasıl bir şeyden nefret ediyorum - Alexander Derck


Genel olarak, ilk seçeneğiniz (preventDefault()) almak için olan, ama hangi bağlamda olduğunuzu ve hedefleriniz ne olduğunu bilmek zorunda.

Kodlama Yakıt harika makale return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

NOT:  Kodlama Yakıt Yukarıdaki bağlantı 5xx hataları oldukça uzun bir süredir üretmektedir. İçinde bir kopyasını buldum İnternet Arşivi, PDF'ye yazdırdı ve Dropbox'a koydu: Arşivlenen makale return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Referans linki bozuldu, 502 hatası veriyor. - Visruth
@VisruthCV Arşiv sürümüne bağlantı eklenmiş notuma bakın - JAAulde


JQuery kullanırken, return false aradığınızda 3 ayrı şey yapıyor:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Geri çağırma işlemini durdurur ve çağrıldığında hemen döner.

Görmek jQuery Olaylar: Geri Dönüş Yanlış Kullanarak Durdur (Yanlış) Daha fazla bilgi ve örnek için.


51
2018-02-19 15:54





Üzerine çok fazla fonksiyon asabilirsiniz onClick bir eleman için olay. Nasıl emin olabilirsin false ateşe son çıkan kimse olacak mı? preventDefault Diğer taraftan kesinlikle sadece elemanın varsayılan davranışını önleyecektir.


38
2017-08-31 12:02





bence

event.preventDefault()

W3C, olayları iptal etmenin belirli bir yoludur.

Bunu W3C spesifikasyonunda okuyabilirsiniz. Etkinlik iptali.

Ayrıca her durumda geri dönüşü kullanamazsınız. Href özniteliğinde bir javascript işlevi verirken ve false döndürürseniz, kullanıcı yanlış bir dizgeye sahip bir sayfaya yönlendirilir.


18
2017-08-31 12:04



Hiç tanıştığım herhangi bir tarayıcıda yok. Belki bununla karıştırırsın <a href="javascript:return false" ya da başka birşey? - mplungjan
1; false döndüren bir hrefin, üzerinde yazılan "yanlış" kelimesi ile bir metin sayfası üreteceği iddiası tam anlamıyla saçmadır. - Mark Amery
(Eksi) 1; kırık link + tam anlamsız - Phil


Bunu yapmanın en iyi yolunun kullanmak olduğunu düşünüyorum. event.preventDefault() çünkü işleyicide bir istisna ortaya çıkarsa, o zaman geri dönüş false ifadesi atlanacak ve davranış istediğiniz şeye ters olacaktır.

Ancak kodun istisnaları tetiklemediğinden eminseniz, istediğiniz herhangi bir yöntemle devam edebilirsiniz.

Eğer hala geri dönmek istiyorsan falseDaha sonra, tüm işleyici kodunuzu aşağıdaki gibi bir try catch bloğuna koyabilirsiniz:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

13
2018-03-09 19:27