Bir web sayfasını veya web sitesini güncellerken, dahil edilen bazı bağlantıların artık gerekli olmadığı veya alakasız hale geldiği durumlar vardır. Buna ek olarak, belirli bir web sitesinin trafiğini etkin bir şekilde yönetmek. Bu gibi durumlarda, JavaScript'teki olayların iptal edilmesi, bazı işlevlerin devre dışı bırakılmasında ve bu tür vaka senaryolarının ele alınmasında harikalar yaratır.
JavaScript'te Etkinlikler Nasıl İptal Edilir?
JavaScript'teki olayları iptal etmek için aşağıdaki yaklaşımlar kullanılabilir:
-
- “ önlemeVarsayılan() ' yöntem.
- “ Boole Değeri ' yaklaşmak.
- “ yayılımı durdur() ' yöntem.
Yaklaşım 1: JavaScript'te Olayları önlemeDefault() Yöntemini Kullanarak İptal Etme
“ önlemeVarsayılan() ” yöntemi, iptal edilebilir ise ekli olayı iptal eder. Bu yöntem, ekli olayı erişilen bağlantıdan ayırmak ve böylece eylemin gerçekleştirilmesini engellemek için kullanılabilir.
Sözdizimi
event.preventDefault ( )
Verilen sözdiziminde:
-
- “ Etkinlik ” ayrılacak olayı ifade eder.
Örnek
Aşağıda verilen kod parçacığını gözden geçirin:
< h3 > Tıklama etkinliği iptal edilecek ! h3 >
< a İD = 'alan' href = 'https://www.google.com/' > Google Web Sitesini ziyaret edin a >
belge.getElementById ( 'alan' ) .addEventListener ( 'Tıklayın' , işlev ( iptal etmek ) {
iptal.preventDefault ( ) ;
} ) ;
Aşağıda belirtilen adımları izleyin:
-
- Öncelikle Document Object Model(DOM) üzerinde görüntülenecek belirtilen başlığı ekleyin.
- Bundan sonra, ' URL ' kullanmak ' href ' bağlanmak.
- Şimdi, kodun JavaScript bölümünde belirtilen URL'ye erişin.
- Ayrıca, bir ' Tıklayın ” olayını kullanarak bir fonksiyon yardımıyla URL ile “ addEventListener() ' yöntem.
- Son olarak, “ önlemeVarsayılan() Ekli olayı ayırmak için fonksiyonun parametresi yardımıyla ” yöntemi uygulanacaktır.
Çıktı
Yaklaşım 2: Bir Boole Değeri Döndürerek JavaScript'teki Olayları İptal Etme
Bu yaklaşım, “ yanlış ” tetiklenen olay üzerine boole değeri.
Örnek
Aşağıdaki kod satırları belirtilen konsepti göstermektedir:
< merkez >< giriş tip = 'Metin' Yer tutucu = 'Metin Girin' giriş = 'cancelEvent()' > merkez >işlev iptalEtkinlik ( ) {
dönüş yanlış ;
Alarm ( 'Bu açıklama görüntülenmeyecek' )
}
Yukarıdaki kod parçasında:
-
- İlk olarak, “
” etiketi, bir giriş metin alanı tahsis edin. - Ayrıca, bir “ giriş ” belirtilen olay” Yer tutucu ' değer. Bu, metin girildikten sonra belirtilen işlevin çağrılmasıyla sonuçlanacaktır.
- Şimdi, kodun JavaScript bölümünde “ adlı bir işlev bildirin. iptalEvent() ”. Tanımında, boole değerini döndür ' yanlış ” dahil edilenleri iptal etmek için” Etkinlik ”.
- Son olarak, uyarı kutusunda belirtilen mesajı belirtin. Döndürülen boole değeri, görüntülenecek diyalog kutusunun önlenmesine neden olacaktır.
- İlk olarak, “
Çıktı
Yukarıdaki çıktıda, erişilen fonksiyon üzerine uyarı diyalog kutusunun görüntülenmediği ve bu nedenle ekli olayın iptal edildiği görülebilir.
Yaklaşım 3: stopPropagation() Yöntemini Kullanarak JavaScript'te Olayları İptal Etme
“ yayılımı durdur() ” yöntemi aynı olayın yayılmasını engeller. Bu yöntem, onay kutusu işaretlendikten sonra iki div arasında yayılmayı durdurmak için kullanılabilir.
Sözdizimi
event.stopYayılma ( )
Örnek
Aşağıdaki kod satırlarına dikkat edin:
< merkez >< h3 > Değişikliği gözlemlemek için Web Sitesine tıklayın: h3 >< div tıklamada = 'eleman2()' > Linux
< div tıklamada = 'eleman1(olay)' > İnternet sitesi div >
div >
< br >
Yayılımı Durdurmak İçin Kontrol Edin:
< giriş tip = 'onay kutusu' İD = 'Kontrol' >
merkez >
-
- İlk adımda, benzer şekilde belirtilen başlığı ekleyin.
- Şimdi, iki ' div ” ekli etiketler” tıklamada ” her biri element2() ve element1() olmak üzere iki farklı işlevi çağıran olaylar.
- Ayrıca, belirtilen kimliğe sahip bir onay kutusu ekleyin. Bu onay kutusu, iki div arasındaki yayılmanın durdurulmasına neden olacaktır.
Şimdi, aşağıdaki JavaScript kod satırlarına bakın:
işlev eleman1 ( ve ) {Alarm ( 'Web Sitesini Tıkladınız' ) ;
eğer ( belge.getElementById ( 'Kontrol' ) .kontrol ) {
e.stopYayılım ( ) ;
}
}
işlev eleman2 ( ) {
Alarm ( 'Linuxhint'i Tıkladınız' ) ;
}
Yukarıdaki js kodunda:
-
- “ adlı bir işlev tanımlayın eleman1() ”. Burada, parametre ' ve ” anlamına gelir” Etkinlik ” kodun HTML bölümünde belirtilen tetikleniyor.
- Tanımında, belirtilen mesajı içeren uyarı iletişim kutusunu görüntüleyin.
- Bundan sonra, kimliğine göre oluşturulan onay kutusuna “ öğesini kullanarak erişin. getElementById() ' yöntem. Ayrıca, ' kontrol ” özelliği, işaretli onay kutusunun durumunu kontrol etmek için.
- Ardından, ' yayılımı durdur() ” parametresine atıfta bulunan yöntem ve ”. Bu, bir işlevden diğer işleve yayılmanın durdurulmasına neden olacaktır.
- Benzer şekilde, başka bir işlev tanımlayın “ eleman2() ” üzerine yayılacaktır. Bu işlev yalnızca yayılmadan önce işlevsel olacaktır.
Çıktı
Burada, onay kutusu işaretlendikten sonra div'e tıklandığında davranışı gözlemler.
Olayları iptal etme yaklaşımlarını JavaScript'te derledik.
Çözüm
“ önlemeVarsayılan() ” yöntemi, “ boole değeri ” yaklaşımı veya “ yayılımı durdur() JavaScript'te olayları iptal etmek için ” yöntemi kullanılabilir. İlk yöntem, bağlantının devre dışı bırakılmasıyla sonuçlanan ekli olayı ayırmak için uygulanabilir. Boole değeri yaklaşımı, “ yanlış ” tetiklenen olay üzerine boole değeri. StopPropagation() yöntemi, dahil edilmiş bir onay kutusu yardımıyla iki div arasında yayılmayı durdurmak için uygulanabilir. Bu eğitici, JavaScript'teki etkinlikleri iptal etmeyi açıkladı.