preventDefault
ve stopPropagation
: Hangi yöntemin ne zaman kullanılacağı ve her yöntemin tam olarak ne işe yaradığı.
Event.stopPropagation() ve Event.preventDefault()
JavaScript olay yönetimi genellikle basittir. Bu, özellikle basit (nispeten düz) bir HTML yapısıyla çalışırken geçerlidir. Ancak etkinlikler bir öğe hiyerarşisinde ilerlediğinde (veya yayıldığında) işler biraz daha karmaşık hale gelir. Bu genellikle geliştiricilerin karşılaştıkları sorunları çözmek için stopPropagation()
ve/veya preventDefault()
için iletişime geçmeleri nedeniyle yaşanır. "preventDefault()
'yi deneyeceğim. Bu işe yaramazsa stopPropagation()
'yi deneyeceğim. Bu da işe yaramazsa ikisini birden deneyeceğim." diye düşünüyorsanız bu makale tam size göre. Her yöntemin ne işe yaradığını ve ne zaman kullanılacağını tam olarak açıklayacağım. Ayrıca, keşfedebileceğiniz çeşitli çalışma örnekleri de sunacağım. Amacım bu karışıklığı tamamen ortadan kaldırmak.
Ancak çok ayrıntılı incelemeye geçmeden önce, JavaScript'te mümkün olan iki tür etkinlik işleme yöntemine kısaca değinmek önemlidir (tüm modern tarayıcılarda. 9 sürümünden önceki Internet Explorer, etkinlik yakalamayı hiç desteklemiyordu).
Etkinlik stilleri (toplama ve kabarcık oluşturma)
Tüm modern tarayıcılar etkinlik yakalamayı destekler ancak geliştiriciler tarafından çok nadiren kullanılır.
İlginç bir şekilde, Netscape'in başlangıçta desteklediği tek etkinlik türü buydu. Netscape'in en büyük rakibi Microsoft Internet Explorer, etkinlik yakalamayı hiç desteklemiyordu. Bunun yerine, yalnızca etkinlik kabarcıklaşması adı verilen başka bir etkinlik stilini destekliyordu. W3C kurulduktan sonra, her iki etkinlik stilinin de avantajlı olduğunu fark etti ve addEventListener
yöntemine üçüncü bir parametre ekleyerek tarayıcıların her ikisini de desteklemesi gerektiğini açıkladı. Bu parametre başlangıçta yalnızca bir boole idi ancak tüm modern tarayıcılar üçüncü parametre olarak bir options
nesnesini destekler. Bu nesneyi, etkinlik yakalamayı kullanmak isteyip istemediğinizi belirtmek (diğerlerinin yanı sıra) için kullanabilirsiniz:
someElement.addEventListener('click', myClickHandler, { capture: true | false });
options
nesnesi ve capture
özelliğinin isteğe bağlı olduğunu unutmayın. Bunlardan biri atlanırsa capture
için varsayılan değer false
olur. Bu, etkinlik kabarcıklaşmasının kullanılacağı anlamına gelir.
Etkinlik yakalama
Etkinlik işleyicinizin "yakalama aşamasında dinleme" durumunda olması ne anlama gelir? Bunu anlamak için etkinliklerin nasıl oluştuğunu ve nasıl yayıldığını bilmemiz gerekir. Geliştirici olarak bu etkinliklerden yararlanmıyor, önemsemiyor veya bunlar hakkında düşünmüyor olsanız bile aşağıdakiler tüm etkinlikler için geçerlidir.
Tüm etkinlikler pencerede başlar ve önce yakalama aşamasından geçer. Bu, bir etkinlik gönderildiğinde pencereyi başlattığı ve önce hedef öğesine doğru "aşağıya" doğru ilerlediği anlamına gelir. Bu durum, yalnızca kabarcık aşamasında dinliyor olsanız bile gerçekleşir. Aşağıdaki örnek işaretlemeyi ve JavaScript'i inceleyin:
<html>
<body>
<div id="A">
<div id="B">
<div id="C"></div>
</div>
</div>
</body>
</html>
document.getElementById('C').addEventListener(
'click',
function (e) {
console.log('#C was clicked');
},
true,
);
Kullanıcı #C
öğesini tıkladığında window
kaynağından bir etkinlik gönderilir. Bu etkinlik, aşağıdaki şekilde alt öğelerine dağıtılır:
Hedefe ulaşana kadar window
=> document
=> <html>
=> <body>
=> ve benzeri.
window
veya document
veya <html>
öğesinde ya da <body>
öğesinde (veya hedefine giden başka bir öğede) tıklama etkinliği dinleyen bir öğe olup olmadığı önemli değildir. Etkinlik yine window
'te başlar ve yolculuğunu az önce açıklandığı gibi başlatır.
Örneğimizde tıklama etkinliği, window
ile #C
arasındaki her öğe aracılığıyla window
'dan hedef öğesine (bu durumda #C
) yayılmaya (bu, doğrudan stopPropagation()
yönteminin işleyiş şekliyle bağlantılı olduğu için önemli bir kelimedir ve bu belgenin ilerleyen bölümlerinde açıklanacaktır) devam eder.
Bu, tıklama etkinliğinin window
itibarıyla başlayacağı ve tarayıcının şu soruları soracağı anlamına gelir:
"Yakalama aşamasında window
üzerinde tıklama etkinliği dinleyen bir şey var mı?" Bu durumda, uygun etkinlik işleyiciler tetiklenir. Örneğimizde hiçbir şey yok, bu nedenle hiçbir işleyici tetiklenmez.
Ardından etkinlik document
'ye yayılır ve tarayıcı şu soruyu sorar: "Kayıt aşamasında document
'de tıklama etkinliği için dinleyen bir şey var mı?" Bu durumda, uygun etkinlik işleyicileri tetiklenir.
Ardından etkinlik, <html>
öğesine dağıtılır ve tarayıcı şu soruyu sorar: "Yakalama aşamasında <html>
öğesine yapılan tıklama ile ilgili dinlenen bir şey var mı?" Bu durumda, uygun etkinlik işleyicileri tetiklenir.
Ardından etkinlik <body>
öğesine yayılılır ve tarayıcı şu soruyu sorar: "Kayıt aşamasında <body>
öğesinde tıklama etkinliği dinleyen bir şey var mı?" Bu durumda, uygun etkinlik işleyiciler tetiklenir.
Ardından etkinlik, #A
öğesine yayılır. Yine tarayıcı şu soruyu sorar: "Yakalama aşamasında
#A
ürününde bir tıklama etkinliği için dinlenen bir şey mi ve bu durumda uygun etkinlik işleyiciler etkinleşir.
Ardından etkinlik, #B
öğesine yayılılır (ve aynı soru sorulur).
Son olarak, etkinlik hedefine ulaşır ve tarayıcı şu soruyu sorar: "Çekme aşamasında #C
öğesindeki tıklama etkinliğini dinleyen bir şey var mı?" Bu sefer cevabımız "evet". Etkinliğin hedef yerinde olduğu bu kısa dönem, "hedef aşama" olarak bilinir. Bu noktada, etkinlik işleyici tetiklenir, tarayıcı "#C tıklandı" ifadesini console.log ile gösterir ve işimiz biter, değil mi?
Yanlış! Henüz işimiz bitmedi. Süreç devam eder ancak bu aşamada kabarcıklanma aşamasına geçer.
Etkinlik kabarcıklaşması
Tarayıcı şunları sorar:
"Taşma aşamasında #C
üzerinde tıklama etkinliği dinleyen bir şey var mı?" Buraya çok dikkat edin.
Tıklamaları (veya herhangi bir etkinlik türünü) hem yakalama hem taşma aşamalarında dinlemek tamamen mümkündür. Etkinlik işleyicileri her iki aşamada da bağladıysanız (ör. .addEventListener()
öğesini bir kez capture = true
ve bir kez capture = false
ile olmak üzere iki kez çağırarak) evet, her iki etkinlik işleyici de aynı öğe için kesinlikle etkinleşir. Ancak etkinliğin farklı aşamalarda (biri yakalama aşamasında, diğeri kaynaşma aşamasında) etkinleştiğini unutmayın.
Ardından etkinlik, üst öğesi #B
'ye yayılılır (etkinliğin DOM ağacında "yukarı" doğru ilerlediği anlaşıldığı için daha yaygın olarak "taşma" olarak belirtilir) ve tarayıcı şu soruyu sorar: "Taşma aşamasında #B
'de tıklama etkinliklerini dinleyen bir şey var mı?" Örneğimizde hiçbir şey yok, bu nedenle hiçbir işleyici tetiklenmez.
Ardından, etkinlik #A
alanına baloncuk olarak eklenir ve tarayıcı şu soruyu sorar: "Kaynaşma aşamasında #A
etkinliğindeki tıklama etkinliklerini dinleyen bir şey var mı?"
Ardından etkinlik <body>
alanına baloncuk olarak gösterilir: "Kaynaşma aşamasında <body>
öğesindeki tıklama etkinliklerini dinleyen bir şey var mı?"
Ardından <html>
öğesi: "Kublaj aşamasında <html>
öğesindeki tıklama etkinliklerini dinleyen bir şey var mı?
Ardından document
: "Bulanıklaştırma aşamasında document
üzerinde tıklama etkinliklerini dinleyen bir şey var mı?"
Son olarak window
: "Bulanıklaştırma aşamasında pencerede tıklama etkinliklerini dinleyen bir şey var mı?"
Bora Uzun bir yolculuk oldu ve etkinliğimiz şu anda çok yorgun olabilir. Ancak inanın her etkinlik bu yolculuktan geçer. Geliştiriciler genellikle yalnızca bir etkinlik aşamasıyla ilgilendiği için (genellikle de kabarcıklanma aşamasıyla) bu durum çoğu zaman fark edilmez.
İşleyiciler etkinleşirken etkinlik yakalama, olay kaynaştırma ve konsolda bazı notlar kaydetme işlemlerini oynayarak biraz zaman geçirmeye değer. Bir etkinliğin izlediği yolu görmek çok faydalıdır. Aşağıda, her iki aşamadaki her öğeyi dinleyen bir örnek verilmiştir.
<html>
<body>
<div id="A">
<div id="B">
<div id="C"></div>
</div>
</div>
</body>
</html>
document.addEventListener(
'click',
function (e) {
console.log('click on document in capturing phase');
},
true,
);
// document.documentElement == <html>
document.documentElement.addEventListener(
'click',
function (e) {
console.log('click on <html> in capturing phase');
},
true,
);
document.body.addEventListener(
'click',
function (e) {
console.log('click on <body> in capturing phase');
},
true,
);
document.getElementById('A').addEventListener(
'click',
function (e) {
console.log('click on #A in capturing phase');
},
true,
);
document.getElementById('B').addEventListener(
'click',
function (e) {
console.log('click on #B in capturing phase');
},
true,
);
document.getElementById('C').addEventListener(
'click',
function (e) {
console.log('click on #C in capturing phase');
},
true,
);
document.addEventListener(
'click',
function (e) {
console.log('click on document in bubbling phase');
},
false,
);
// document.documentElement == <html>
document.documentElement.addEventListener(
'click',
function (e) {
console.log('click on <html> in bubbling phase');
},
false,
);
document.body.addEventListener(
'click',
function (e) {
console.log('click on <body> in bubbling phase');
},
false,
);
document.getElementById('A').addEventListener(
'click',
function (e) {
console.log('click on #A in bubbling phase');
},
false,
);
document.getElementById('B').addEventListener(
'click',
function (e) {
console.log('click on #B in bubbling phase');
},
false,
);
document.getElementById('C').addEventListener(
'click',
function (e) {
console.log('click on #C in bubbling phase');
},
false,
);
Konsol çıkışı, hangi öğeyi tıkladığınıza bağlıdır. DOM ağacındaki "en derin" öğeyi (#C
öğesi) tıklarsanız bu etkinlik işleyicilerin etkinleştiğini görürsünüz. Hangi öğenin olduğunu daha açık hale getirmek için biraz CSS stilini kullanarak konsol çıkışı #C
öğesini aşağıda görebilirsiniz (ekran görüntüsüyle birlikte):
"click on document in capturing phase"
"click on <html> in capturing phase"
"click on <body> in capturing phase"
"click on #A in capturing phase"
"click on #B in capturing phase"
"click on #C in capturing phase"
"click on #C in bubbling phase"
"click on #B in bubbling phase"
"click on #A in bubbling phase"
"click on <body> in bubbling phase"
"click on <html> in bubbling phase"
"click on document in bubbling phase"
Aşağıdaki canlı demoda bu özelliği etkileşimli olarak kullanabilirsiniz. #C
öğesini tıklayın ve konsol çıkışını gözlemleyin.
event.stopPropagation()
Etkinliklerin nereden kaynaklandığını ve hem yakalama hem de taşma aşamalarında DOM'de nasıl ilerlediğini (yani yayıldığını) anladıktan sonra şimdi event.stopPropagation()
konusuna geçebiliriz.
stopPropagation()
yöntemi, yerel DOM etkinliklerinde (çoğu) çağrılabilir. “En çok” diyorum çünkü bu yöntemi çağırmanın bir işe yaramayacağı
birkaç yöntem vardır (çünkü etkinlik ile başlamaz). focus
, blur
, load
, scroll
ve birkaç diğer etkinlik bu kategoriye girer. stopPropagation()
öğesini çağırabilirsiniz, ancak bu etkinlikler yayılmadığı için ilginç bir şey olmaz.
Peki stopPropagation
ne işe yarar?
Adı üstünde, bu araç tam olarak bunu yapar. Çağırdığınızda, etkinlik o noktadan itibaren aksi takdirde gideceği tüm öğelere yayılmayı durdurur. Bu durum her iki yön için de (yakalama ve kabarcık oluşturma) geçerlidir. Bu nedenle, yakalama aşamasının herhangi bir yerinde stopPropagation()
çağrısı yaparsanız etkinlik hiçbir zaman hedef aşamaya veya kabarcık aşamasına ulaşamaz. Bu işlevi kabarcıklanma aşamasında çağırırsanız yakalama aşamasını geçmiş olur ancak çağırdığınız noktadan itibaren "kabarcıklanma" işlemi durdurulur.
Aynı örnek işaretlememize dönecek olursak, #B
öğesinde yakalama aşamasında stopPropagation()
çağrılırsa ne olur?
Bu durumda aşağıdaki çıkış elde edilir:
"click on document in capturing phase"
"click on <html> in capturing phase"
"click on <body> in capturing phase"
"click on #A in capturing phase"
"click on #B in capturing phase"
Aşağıdaki canlı demoda bu özelliği etkileşimli olarak kullanabilirsiniz. Canlı demoda #C
öğesini tıklayın ve konsol çıkışını gözlemleyin.
Kabarcıklanma aşamasında #A
'te yayımı durdurmak ister misiniz? Bu durumda aşağıdaki çıktı elde edilir:
"click on document in capturing phase"
"click on <html> in capturing phase"
"click on <body> in capturing phase"
"click on #A in capturing phase"
"click on #B in capturing phase"
"click on #C in capturing phase"
"click on #C in bubbling phase"
"click on #B in bubbling phase"
"click on #A in bubbling phase"
Aşağıdaki canlı demoda etkileşimli olarak oynayabilirsiniz. Canlı demoda #C
öğesini tıklayın ve konsol çıkışını gözlemleyin.
Eğlenmek için bir tane daha. #C
için hedef aşamasında stopPropagation()
çağrırsak ne olur?
"Hedef aşaması"nın, etkinliğin hedefinde olduğu döneme verilen ad olduğunu unutmayın. Bu durumda aşağıdaki çıkış elde edilir:
"click on document in capturing phase"
"click on <html> in capturing phase"
"click on <body> in capturing phase"
"click on #A in capturing phase"
"click on #B in capturing phase"
"click on #C in capturing phase"
"Kayıt aşamasında #C'yi tıklayın" ifadesini kaydettiğimiz #C
etkinliği işleyicisinin yine çalıştığını ancak "Bulanıklaştırma aşamasında #C'yi tıklayın" ifadesini kaydettiğimiz işleyicinin çalışmadığını unutmayın. Bu, tam olarak mantıklı olacaktır. stopPropagation()
'ü öncekinden çağırdık. Bu nedenle, etkinliğin yayılması bu noktada sona erer.
Aşağıdaki canlı demoda etkileşimli olarak oynayabilirsiniz. Canlı demoda #C
öğesini tıklayın ve konsol çıkışını gözlemleyin.
Bu canlı demolardan herhangi birinde denemeler yapmanızı öneririz. Yalnızca #A
öğesini veya yalnızca body
öğesini tıklamayı deneyin. Ne olacağını tahmin etmeye çalışın ve yanıtınızın doğru olup olmadığını gözlemleyin. Bu aşamada oldukça doğru tahminler yapabilirsiniz.
event.stopImmediatePropagation()
Bu garip ve sık kullanılmayan yöntem nedir? stopPropagation
ile benzerdir ancak bir etkinliğin alt öğelere (yakalama) veya üst öğelere (yükseltme) gitmesini durdurmak yerine bu yöntem yalnızca tek bir öğeye bağlı birden fazla etkinlik işleyiciniz olduğunda geçerlidir. addEventListener()
çoklu yayın tarzında etkinlik işlevini desteklediğinden, bir etkinlik işleyiciyi tek bir öğeye birden fazla kez bağlamak tamamen mümkündür. Bu durumda (çoğu tarayıcıda), etkinlik işleyicileri bağlandıkları sırayla yürütülür. stopImmediatePropagation()
işlevinin çağrılması, sonraki işleyicilerin
etkinleşmesini önler. Aşağıdaki örneği inceleyin:
<html>
<body>
<div id="A">I am the #A element</div>
</body>
</html>
document.getElementById('A').addEventListener(
'click',
function (e) {
console.log('When #A is clicked, I shall run first!');
},
false,
);
document.getElementById('A').addEventListener(
'click',
function (e) {
console.log('When #A is clicked, I shall run second!');
e.stopImmediatePropagation();
},
false,
);
document.getElementById('A').addEventListener(
'click',
function (e) {
console.log('When #A is clicked, I would have run third, if not for stopImmediatePropagation');
},
false,
);
Yukarıdaki örnek, aşağıdaki konsol çıkışıyla sonuçlanır:
"When #A is clicked, I shall run first!"
"When #A is clicked, I shall run second!"
İkinci etkinlik işleyicinin e.stopImmediatePropagation()
işlevini çağırması nedeniyle üçüncü etkinlik işleyicinin hiçbir zaman çalışmadığını unutmayın. Onun yerine e.stopPropagation()
adını çağırsaydık üçüncü işleyici yine de çalışırdı.
event.preventDefault()
stopPropagation()
bir etkinliğin "aşağıya" (yakalama) veya "yukarıya" (kabarcık oluşturma) doğru ilerlemesini engelliyorsa preventDefault()
ne yapar? Benzer bir şey yapıyor gibi. Evet.
Pek sayılmaz. Bu iki kavram genellikle birbirine karıştırılır ancak aslında aralarında pek bir ilişki yoktur.
preventDefault()
simgesini gördüğünüzde kafanızda "aksiyon" kelimesini ekleyin. "Varsayılan işlemi engelleme"yi düşünün.
Varsayılan işlem olarak neyi sorabilirim? Maalesef bu sorunun cevabı, söz konusu öğe ve etkinlik kombinasyonuna büyük ölçüde bağlı olduğu için net değil. İşleri daha da karmaşık hale getirmek için bazen varsayılan işlem hiç yoktur.
Anlaması gereken çok basit bir örnekle başlayalım. Bir web sayfasındaki bağlantıyı tıkladığınızda ne olmasını beklersiniz? Elbette tarayıcının, bu bağlantıyla belirtilen URL'ye gitmesini beklersiniz.
Bu durumda öğe bir ana sayfa etiketi, etkinlik ise bir tıklama etkinliğidir. Bu kombinasyonun (<a>
+ click
) "varsayılan işlemi", bağlantının href özelliğine gitmek olur. Tarayıcının bu varsayılan işlemi
yapmasını engellemek istiyorsanız ne olur? Yani, <a>
öğesinin href
özelliği tarafından belirtilen URL'ye tarayıcının gitmesini engellemek istediğinizi varsayalım. preventDefault()
, sizin için şu işlemleri yapar: Aşağıdaki örneğe bakın:
<a id="avett" href="https://www.theavettbrothers.com/welcome">The Avett Brothers</a>
document.getElementById('avett').addEventListener(
'click',
function (e) {
e.preventDefault();
console.log('Maybe we should just play some of their music right here instead?');
},
false,
);
Aşağıdaki canlı demoda etkileşimli olarak oynayabilirsiniz. The Avett Brothers bağlantısını tıklayın ve konsol çıktısını (ve Avett Brothers web sitesine yönlendirilmediğinizi) gözlemleyin.
Normalde, Avett Brothers etiketli bağlantıyı tıklamak, www.theavettbrothers.com
adresine gitmeyi sağlar. Ancak bu durumda, <a>
öğesine bir tıklama etkinliği işleyici bağladık ve varsayılan işlemin engellenmesi gerektiğini belirttik. Bu nedenle, kullanıcı bu bağlantıyı tıkladığında herhangi bir yere yönlendirilmez. Bunun yerine konsolda "Belki de müziklerinin bir kısmını burada çalmamız daha iyi olur?" ifadesi kaydedilir.
Varsayılan işlemi önlemenize olanak tanıyan diğer öğe/etkinlik kombinasyonları nelerdir? Hepsini listeleyemiyorum, bazen de görmek için yalnızca denemeler yapmanız gerekiyor. Ancak kısaca belirtmek gerekirse:
<form>
öğesi + "submit" etkinliği: Bu kombinasyon içinpreventDefault()
, formun gönderilmesini engeller. Bu, doğrulama yapmak istiyorsanız kullanışlıdır. Bir şey başarısız olursa formun gönderilmesini durdurmak için koşullu olarak preventDefault'i çağırabilirsiniz.<a>
öğesi + "tıklama" etkinliği: Bu kombinasyon içinpreventDefault()
, tarayıcının<a>
öğesinin href özelliğinde belirtilen URL'ye gitmesini engeller.document
+ "mousewheel" etkinliği: Bu kombinasyon içinpreventDefault()
, fare tekerleği ile sayfanın kaydırılmasını engeller (klavyeyle kaydırma işlemi yine de çalışır).
↜ Bu,{ passive: false }
ileaddEventListener()
adlı kişinin çağrılmasını gerektirir.document
+ "keydown" etkinliği: Bu kombinasyon içinpreventDefault()
ölümcüldür. Klavye kaydırma, sekme tuşu ve klavye vurgulama işlemlerini engelleyerek sayfayı büyük ölçüde işe yaramaz hale getirir.document
+ "mousedown" etkinliği: Bu kombinasyon içinpreventDefault()
, fareyle metnin vurgulanmasını ve fare aşağıyken tetiklenen diğer "varsayılan" işlemleri engeller.<input>
öğesi + "keypress" etkinliği: Bu kombinasyon içinpreventDefault()
, kullanıcı tarafından yazılan karakterlerin giriş öğesine ulaşmasını engeller (ancak bunu yapmayın; geçerli bir nedeni yoktur).document
+ "contextmenu" etkinliği: Bu kombinasyon içinpreventDefault()
, kullanıcı sağ tıkladığında veya uzun bastığında (veya içerik menüsünün görünebileceği başka bir şekilde) yerel tarayıcı içerik menüsünün görünmesini engeller.
Bu liste tam kapsamlı olmasa da preventDefault()
'ün nasıl kullanılabileceğine dair iyi bir fikir verecektir.
Eğlenceli bir fıkra mı?
Dokümandan başlayarak kayıt aşamasında stopPropagation()
ve preventDefault()
yaparsanız ne olur? Bu sırada çok eğleneceksiniz. Aşağıdaki kod snippet'i, web sayfalarını neredeyse tamamen kullanılamaz hale getirir:
function preventEverything(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
document.addEventListener('click', preventEverything, true);
document.addEventListener('keydown', preventEverything, true);
document.addEventListener('mousedown', preventEverything, true);
document.addEventListener('contextmenu', preventEverything, true);
document.addEventListener('mousewheel', preventEverything, { capture: true, passive: false });
Bunu neden yapmak isteyeceğinizi tam olarak bilmiyorum (birine şaka yapmak isteme ama burada neler olduğu üzerine düşünüp neden böyle bir durum meydana getirdiğini anlamak faydalıdır).
Tüm etkinliklerin kaynağı window
. Bu nedenle, bu snippet'te click
, keydown
, mousedown
, contextmenu
ve mousewheel
etkinliklerinin tümü, onları dinleyen öğelere erişmeye çalışırken durduruluyor. Ayrıca, bundan sonra belgeye bağlanan tüm işleyicilerin de engellenmesi için stopImmediatePropagation
adını veririz.
Sayfanın stopPropagation()
ve stopImmediatePropagation()
nedeniyle (en azından çoğunlukla) kullanılamaz hale gelmediğini unutmayın. Bu filtreler, etkinliklerin normalde gideceği yere ulaşmasını engeller.
Ancak preventDefault()
işlevini de çağırıyoruz. Bu işlevin, varsayılan işlemi engellediğini hatırlayacaksınız. Bu nedenle, varsayılan tüm işlemler (ör. fare tekerleğiyle kaydırma, klavyeyle kaydırma veya vurgulama ya da sekme tuşları, bağlantı tıklama, bağlam menüsü görüntüleme vb.) engellenir ve sayfa oldukça işe yaramaz bir durumda bırakılır.
Canlı demolar
Bu makaledeki tüm örnekleri tek bir yerden incelemek için aşağıdaki yerleşik demoyu inceleyin.
Teşekkür ederiz
Unsplash'taki Tom Wilson tarafından oluşturulan hero resim.