Event.stopPropagation və event.preventDefault arasındakı fərq nədir?

Onlar eyni iş görərlər ... Bir müasir və yaşlı? Və ya onlar müxtəlif brauzerlər tərəfindən dəstəklənir?

Mən hadisələri özümdə (çərçivə olmadan) işləyərkən həmişə ikisini də yoxlayıram və hər ikisini də icra edərəm. (Mən də return false node.addEventListener , ancaq node.addEventListener ilə əlaqəli hadisələrlə node.addEventListener ) hiss edirəm.

Niyə? İkisini də nəzarət etməməlisən? Yoxsa fərq var?

(Mən bir çox sualları bilirəm, amma bunlar eynidır =)))

525
11 мая '11 в 14:45 2011-05-11 14:45 Rudie 11 may, 11: 00-da saat 14 : 45-də təyin olunub
@ 6 cavablar

stopPropagation hadisə zənciri baloncuklarından çıxır.

preventDefault , brauzerin bu hadisəni aldığı preventDefault engeller.

Gəlin deyək

 <div id="foo"> <button id="but" /> </div> $("#foo").click(function() { // mouse click on div }); $("#but").click(function(ev) { // mouse click on button ev.stopPropagation(); }); 

Misal

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo"> <button id="but">button</button> </div> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo"> <button id="but">button</button> </div> 

stopPropagation yalnız adlanır . deyilir . heç işləməyəcək.

Harada yalnız preventDefault yalnız brauzerlər üçün default tədbir dayandırıldı, lakin div element işleyicisi hələ də işləyir.

Aşağıda MDNMSDN dən DOM hadisə obyektlərində bəzi sənədlər var MSDN

MSDN:

MDN:

IE9 və FF üçün, preventDefault və stopPropagation istifadə edə bilərsiniz.

IE8 və aşağıda göstərilənləri dəstəkləmək üçün, stopPropagation etməklə əvəz edin və stopPropagation ilə cancelBubble əvəz returnValue

688
11 мая '11 в 14:46 2011-05-11 14:46 cavab Raynos tərəfindən mayın 11-də, 11-də saat 14 : 46-da verilir. 2011-05-11 14:46

Quirksmode.org saytından

Hadisə tutma

Hadisəni ələ keçirərkən

|  | --------------- |  | ----------------- |  element1 |  |  | |  ----------- |  | ----------- | |  | element2 \ / |  | |  ------------------------- | |  Hadisə CAPTURING | -----------------------------------

element1 hadisə işçisi əvvəlcə işə salınır, son element2 hadisə işləyicisi işə salınır.

Bubbling hadisə

Tədbirdə baloncuklar istifadə edərkən
/ \ --------------- |  | ----------------- |  element1 |  |  | |  ----------- |  | ----------- | |  | element2 |  |  |  | |  ------------------------- | |  Hadisə BUBBLING | -----------------------------------

Element2 hadisə işləyicisi əvvəlcə işə salınır, son element1 element işləyicisi işə salınır.

W3C hadisə modelində baş verən hər hansı bir hadisə əvvəlcə hədəf elementinə çatana qədər tutulur və sonra yenidən kabarcıklanır.

  |  |  / \ ----------------- |  | - |  | ----------------- |  element1 |  |  |  |  | |  ------------- |  | - |  | ----------- | |  | element2 \ / |  |  |  | |  -------------------------------- | |  W3C hadisə modeli ------------------------------------------

Https://www.w3.org/TR/DOM-Level-2-Events/events.html ünvanından

EventListener tutulması hadisənin onun baş verməsindən daha çox işlənməsinin qarşısını almaq istəyirsə, stopPropagation metodu çağırılmalıdır. Eyni iyerarxiya səviyyəsində qeydə alınmış əlavə EventListeners hələ də hadisəni alacaq, baxmayaraq ki, bu hadisənin daha da göndərilməsinə mane olur. Tədbirin dayandırılmasından sonra, Propagation metodu tətbiq olunduqdan sonra, bu üsula əlavə çağırışlar əlavə təsir göstərmir. Heç bir əlavə işğalçı mövcud deyil və StopPropagation çağırılmadıqda, hadisə hədəf özü üçün müvafiq EventListeners tetikler.

Və köpüklənmə üçün:

Hər hansı bir hadisə işəgötürən, Hadisə interfeyinin dayandırılmasıPropagation metoduna zəng edərək hadisələrin daha çox yayılmasının qarşısını ala bilər. Bir EventListener bu üsulu çağırırsa, mövcud EventTarget üçün bütün əlavə EventListeners başlayacaq, lakin baloncuklar bu səviyyədə dayandıra bilər. Daha çox tədbirin qarşısını almaq üçün, yalnız bir stopPropagation çağırışını bubble up etmək tələb olunur.

<strong> Nümunələr:

HTML

 <div id="a"> <a id="b" href="http://www.google.com" target="_blank">google.com</a> </div> <p id="c"></p> 

Javascript

 var el = document.getElementById("c"); function captureOnClickA(e){ el.innerHTML += "DIV event capture<br>"; } function captureOnClickB(e){ el.innerHTML += "A event capture<br>"; } function bubblingOnClickA(e){ el.innerHTML += "DIV event bubbling<br>"; } function bubblingOnClickB(e){ el.innerHTML += "A event bubbling<br>"; } document.getElementById("a").addEventListener("click",captureOnClickA, true); document.getElementById("b").addEventListener("click",captureOnClickB, true); document.getElementById("a").addEventListener("click",bubblingOnClickA, false); document.getElementById("b").addEventListener("click",bubblingOnClickB, false); 

Demo Bu nümunədə dörd hadisə dinləyicisi icra edilir və brauzerdə yeni bir sekme açılır. Çıxış:

 DIV event capture A event capture A event bubbling DIV event bubbling 

Birinci funksiyanı dəyişin:

border=0
 function captureOnClickA(e){ el.innerHTML += "DIV event capture<br>"; e.stopPropagation(); } 

Nəticə:

 DIV event capture 

bir hadisənin aşağıya doğru yayılması və onun yuxarı təbəqələşməsi deməkdir. Demo . Amma bu nişanın açılmasına mane deyil.

stopPropagation() etmək

 function captureOnClickB(e){ el.innerHTML += "A event capture<br>"; e.stopPropagation(); } 

demo və ya

 function bubblingOnClickB(e){ el.innerHTML += "A event bubbling<br>"; e.stopPropagation(); } 

Demo , eyni nəticəyə gətirib çıxaracaq, çünki onlar mövcud EventTarget-da var:

 DIV event capture A event capture A event bubbling 

Bu iki halda, hadisə valideynə qədər bubble etməyə icazə vermədi. Həm də bu ikisi sekmənin açılmasına mane ola bilməz. preventDefault() açılmasını qarşısını almaq üçün, öndeğer tarayıcı eylemini engellemek üçün preventDefault() istifadə preventDefault() :

 function captureOnClickA(e){ el.innerHTML += "DIV event capture<br>"; e.stopPropagation(); e.preventDefault(); } 

İndi sekmə açılmayacaq və hadisə dinləyicilərindən yalnız biri icra ediləcək. Demo .

146
30 мая '14 в 15:16 2014-05-30 15:16 cavab Ashkan 30 may '14 saat 15:16 'də verilir

yanlışlığı qaytarmaq;


return false; onu çağırdığınız zaman 3 ayrı şeyi edir:

  • event.preventDefault() - brauzerlərin default davranışını dayandırır.
  • event.stopPropagation() - Bu, hadisənin DOM-un yayılmasını (və ya bubble) qarşısını alır.
  • Geri çağırmağı dayandırın və çağırıldıqda dərhal geri qaytarın.

Xahiş edirik, bu davranışın adi (qeyri-jQuery) hadisə işleyicilerindən fərqli olduğuna diqqət yetirirlər. Xüsusilə də, return false kabarcıklardan bir hadisəni dayandırmaz.

preventDefault ();


preventDefault(); bir şey yoxdur: brauzerlərin default davranışını dayandırır.

Onları necə istifadə edəcəyik?


Biz nə etdiklərini bilirik, amma nə vaxt istifadə edəcəyik? Bu, sadəcə nail olmaq istədiyiniz şeydən asılıdır. preventDefault(); istifadə edin preventDefault(); , "yalnız" default brauzerinizin davranışını qarşısını almaq istəyirsinizsə. Yanlış istifadə edin; default browser davranışını qarşısını almaq və DOM hadisə yayılmasının qarşısını almaq istədiyiniz zaman. Çox hallarda, qayıdışı yalan istifadə etdiyinizdə; həqiqətən qarşısını almaq lazımdırDefault preventDefault() .

<strong> Nümunələr:


Nümunələrlə məşğul olmağa çalışaq:

JAVASCRIPT-ın təmiz bir nümunəsini görürük

Məsələn:

27 мая '15 в 10:14 2015-05-27 10:14 Keval Bhatt'a 27 May 'da 10:14 ' də cavab verdi 2015-05-27 10:14

Buradan bir təklif .

Hadisə.preventDefault

PreventDefault metodu bir hadisəin default funksiyalarını yerinə yetirməsinə icazə vermir. Məsələn, bu elementi tıklamamaq və cari səhifəni tərk etmək üçün A elementi üçün preventDefault-dan istifadə etməlisiniz:

 //clicking the link will *not* allow the user to leave the page myChildElement.onclick = function(e) { e.preventDefault(); console.log('brick me!'); }; //clicking the parent node will run the following console statement because event propagation occurs logo.parentNode.onclick = function(e) { console.log('you bricked my child!'); }; 

Elementin funksiyası default olaraq bloklanırsa, hadisə DOM-a köçürməyə davam edir.

event.stopPropagation

İkinci üsul StopPropagation siz default funksionallığı istifadə etməyə imkan verir, lakin hadisə yayılmasına mane olur:

 //clicking the element will allow the default action to occur but propagation will be stopped... myChildElement.onclick = function(e) { e.stopPropagation(); console.log('prop stop! no bubbles!'); }; //since propagation was stopped by the child element onClick, this message will never be seen! myChildElement.parentNode.onclick = function(e) { console.log('you will never see this message!'); }; 

stopPropagation, valideyn elementlərini uşağındakı bir hadisə haqqında bilməkdən təsirli olaraq dayandırır.

Sadə durdurma üsulu hadisələri tez bir zamanda işləməyə imkan verir, baxmayaraq ki, köpüklənmə ilə nə etmək istədiyinizi dəqiq düşünmək vacibdir. Mən bütün developer həqiqətən istəyir ki, vaxtın 90% -nin qarşısını alsın! Yanlış "dayandırmaq" hadisələri xətt boyunca bir çox problemlərə səbəb ola bilər; pluginsiniz işləməyəcək və üçüncü tərəf plaginləriniz maskalana bilər. Və ya daha da pis - kodunuz saytda digər funksiyaları pozur.

13
25 марта '14 в 17:55 2014-03-25 17:55 cavab VladL 25 mart 'da 17:55' də verilir 2014-03-25 17:55

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo"> <button id="but">button</button> </div> 
0
10 сент. Cavab 10 sentyabr Manish Singh tərəfindən verilir 2017-09-10 06:57 '17 də 6:57 2017-09-10 06:57

event.preventDefault(); Əməliyyat elementini default olaraq dayandırın.

event.stopPropagation(); DOM ağacında kabarcıkların görünməsini maneə törədir, valideyn işçilərinə hadisə barədə xəbərdarlıq edilməsini maneə törədir.

Məsələn, əlavə bir DIV metodu olan bir DIV və ya FORM daxilində bir DIV metodu ilə bir əlaqə varsa, bu DIV və ya FORM metodunun başlamasına mane olur.

0
06 мая '15 в 14:32 2015-05-06 14:32 Mayın 6-da saat 14: 55- də Mike Klark cavab verərək, 2015-05-06 14:32

etiketləri ilə bağlı digər suallar qarşısını və ya sual soruşmaq