event.preventDefault () ve return false

Belirli bir olay tetiklendikten sonra diğer olay işleyicilerin yürütülmesini engellemek 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 bu iki yöntemi arasında önemli bir fark var mı?

Benim için, return false;bir yöntemi uygulamaktan daha basit, daha kısa ve muhtemelen daha az hataya açıktır. Yöntemle, doğru kasa, parantez vb.

Ayrıca, yöntemi çağırmak için geri arama ilk parametre tanımlamak zorunda. Belki de böyle yapmaktan kaçınmam ve preventDefaultbunun yerine kullanmamın bazı nedenleri var mı? Daha iyi yol nedir?

return falsegelen bir jQuery olay işleyicisi içinde etkin bir şekilde çağrı ile aynıdır e.preventDefaultve e.stopPropagationgeçirilen ilgili jQuery.Event nesne.

e.preventDefault()varsayılan olayın e.stopPropagation()gerçekleşmesini önler, olayın köpürmesini önler ve return falseher ikisini birden yapar. Bu davranış, farklı olduğunu not , normal (non-jQuery) olay işleyicileri, burada, özellikle, return falseetmez değil kadar köpüren gelen olay dur.

Kaynak: John Resig

Bir href tıklamasını iptal etmek için "return false" üzerinden event.preventDefault () yöntemini kullanmanın herhangi bir faydası var mı?

Benim tecrübelerime göre, return false kullanımı üzerine event.preventDefault () kullanılırken en az bir açık avantaj var. Bir sabitleme etiketinde tıklama etkinliğini yakaladığınızı varsayalım. Aksi takdirde, kullanıcı geçerli sayfadan uzaklaşacak olsaydı büyük bir sorun olurdu. Tıklama işleyiciniz tarayıcıda gezinmeyi önlemek için return false kullanırsa, yorumlayıcının return ifadesine ulaşmaması ve tarayıcının bağlantı etiketinin varsayılan davranışını yürütmeye devam etmesi olasılığı açılır.

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

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

  return false;
});

Event.preventDefault () yöntemini kullanmanın yararı, bunu işleyicideki ilk satır olarak ekleyebilmenizdir, böylece işlevin son satırına ulaşılmamasına bakılmaksızın çapanın varsayılan davranışının tetiklenmeyeceğini garanti eder (örn. Çalışma zamanı hatası) ).

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

  // custom handling here

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

Bu, başlık olarak, bir "JavaScript" sorusu değildir; jQuery tasarımı ile ilgili bir sorudur.

jQuery ve John Resig'in ( karim79'un mesajında ) daha önce bağlantılı olan alıntıları , olay işleyicilerinin genel işte nasıl çalıştığının yanlış anlaşılması gibi görünüyor.

Gerçek: false döndüren bir olay işleyicisi, o olay için varsayılan eylemi önler. Olay yayılmasını durdurmaz. Olay işleyicileri, Netscape Navigator'ın eski günlerinden beri her zaman bu şekilde çalıştı.

MDN dokümantasyon açıklar return falsebir olay işleyicisi çalışır içinde

JQuery'de olanlar olay işleyicilerindekilerle aynı değildir. DOM olay dinleyicileri ve MSIE "ekli" olaylar tamamen farklı bir konudur.

Daha fazla okuma için MSDN'de attachEvent ve W3C DOM 2 Events belgelerine bakın .

Genel olarak, ilk seçeneğiniz ( preventDefault()) alınacak olan seçenektir , ancak hangi bağlamda olduğunuzu ve hedeflerinizin neler olduğunu bilmeniz gerekir.

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

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

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

Daha fazla bilgi ve örnek için jQuery Events: Stop False kullanarak False'yi kullanma konusuna bakın .

onClickBir öğe için etkinliğe çok sayıda işlev asabilirsiniz . En son kimin kovulacağından nasıl emin olabilirsiniz false? preventDefaultÖte yandan, öğenin yalnızca varsayılan davranışını kesinlikle önleyecektir.

bence

event.preventDefault()

w3c olayları iptal etme yöntemidir.

Bunu Olay iptalindeki W3C spesifikasyonunda okuyabilirsiniz .

Ayrıca return false değerini her durumda kullanamazsınız. Href özniteliğinde bir javascript işlevi verirken ve false değerini döndürürseniz, kullanıcı false string yazılan bir sayfaya yönlendirilir.

Bunu yapmanın en iyi yolunu kullanmaktır, event.preventDefault()çünkü işleyicide bazı istisnalar ortaya çıkarsa, dönüş falseifadesi atlanır ve davranış istediğiniz şeyin tersidir.

Ancak, kodun istisnaları tetiklemeyeceğinden eminseniz, istediğiniz yöntemlerden herhangi biriyle gidebilirsiniz.

Geri dönüşle hala gitmek falseistiyorsanız, 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;
});

Deneyimlerimden aldığım düşüncem, kullanmak her zaman daha iyidir

event.preventDefault() 

Pratik olarak göndermek olayı durdurmak veya önlemek için, gerektiğinde return false event.preventDefault()iyi çalışır yerine .

Arasındaki temel fark return falseve event.preventDefault()aşağıya kod olmasıdır return falseyürütülmez ve event.preventDefault()durumda kodunuzu bu ifadeye sonra yürütülür.

Return false yazdığınızda, perde arkasında sizin için aşağıdakileri yapın.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

e.preventDefault ();

Bir öğenin varsayılan eylemini durdurur.

Örnek Örn .::

köprünün URL'yi izlemesini, gönder düğmesinin formu göndermesini engeller. Çok sayıda olay işleyiciniz olduğunda ve yalnızca varsayılan olayın gerçekleşmesini ve birçok kez oluşmasını önlemek istediğinizde, bunun için işlevin üst kısmında () kullanmamız gerekir.

Sebep: -

Kullanmanın nedeni, e.preventDefault();kodumuzda bir şeylerin kodda yanlış gitmesi, gönderilmesi için bağlantı veya formun yürütülmesine izin vermeniz veya yapmanız gereken herhangi bir işlemin yürütülmesine veya izin vermesidir. & bağlantı veya gönder düğmesi gönderilecek ve etkinliğin daha da yayılmasına izin verecek.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

Yanlış döndür;

Sadece işlevin () yürütülmesini durdurur.

" return false;" işlemin tüm yürütülmesini sonlandıracak.

Sebep: -

Return false kullanmanın nedeni; işlevi artık kesin modda yürütmek istemediğinizdir.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

Temel olarak, bu şekilde şeyleri birleştirirsiniz, çünkü jQuery çoğunlukla HTML öğelerine odaklanan bir çerçevedir, temel olarak varsayılanı önlersiniz, ancak aynı zamanda kabarma yayılımını durdurursunuz.

Yani basitçe şunu söyleyebiliriz ki, yanlış gir dönüş jQueryeşittir:

return false değeri e.preventDefault AND e.stopPropagation

Ancak, tüm bunları jQuery veya DOM ile ilgili işlevlerde de unutmayın, öğeyi çalıştırdığınızda, temel olarak, olayın varsayılan davranışı ve yayılması da dahil olmak üzere her şeyin tetiklenmesini önler.

Temel olarak kullanmaya başlamadan önce return false;, önce ne yaptığını e.preventDefault();ve ne e.stopPropagation();yaptığını anlayın , o zaman her ikisine de aynı anda ihtiyacınız olduğunu düşünüyorsanız, sadece kullanın.

Temel olarak aşağıdaki kod:

$('div').click(function () {
  return false;
});

olduğu eşit bu koda:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

Benim deneyim event.stopPropagation () çoğunlukla CSS efekti veya animasyon çalışmalarında kullanılır, örneğin hem kart hem de düğme öğesi için fareyle üzerine gelindiğinde, düğmenin üzerine geldiğinizde hem kart hem de düğmelerle üzerine gelme efekti tetiklenir , event.stopPropagation () köpürme eylemlerini durdurmayı kullanabilirsiniz ve event.preventDefault (), tarayıcı eylemlerinin varsayılan davranışını önlemek içindir. Örneğin, formunuz var ancak yalnızca gönderme işlemi için tıklama etkinliği tanımladınız, kullanıcı formu enter tuşuna basarak gönderirse, keypress olayı tarafından tetiklenen tarayıcı, tıklama etkinliğinizi değil, event.preventDefault () yöntemini kullanmalısınız. davranışı. Neyin yanlış döndüğünü bilmiyorum; Daha fazla açıklama için bu bağlantıyı ziyaret edin ve 33. satırla oynayınhttps://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv