Ana sayfa / Rehberler

Görsel öğe seçici, kendisine direnen bir sayfada nasıl çalışır

Bir öğeyi göstermek kulağa basit gelir, ta ki sayfa ayağınızın altından gidene kadar. Seçicinin neyi durdurması gerektiği, neye yapıştığı ve hata fırlatan o çağrı.

· Yazan hsynkvlc

Her tag yönetim aracı eninde sonunda bir öğe seçici kazanır: modu aç, sayfada gez, kastettiğin şeye tıkla, seçiciyi al. Fikir tek cümle. Bunu gerçek bir sayfada — kendi tıklama işleyicileri, kendi gezinmesi ve z-index hakkında kendi fikirleri olan bir sayfada — çalıştırmak epey fazlası.

Tıklama sayfaya ulaşmamalı

Canlı bir sayfaya tıklıyorsunuz. O tıklama gerçek bir tıklamadır: düğme formu gönderir, bağlantı gezinir, modal açılır ve gösterdiğiniz sayfa, seçici okunmadan gitmiştir.

Bu yüzden seçici, kabarma fazında değil yakalama (capture) fazında dinler — olayı aşağı inerken, sayfanın kendi işleyicilerinden önce görür — ve ardından hem preventDefault() hem stopPropagation() çağırır. Biri yetmez: preventDefault tarayıcının varsayılan davranışını durdurur, stopPropagation ise sayfanın kendi dinleyicilerinin olayı hiç görmemesini sağlar.

Vurgu kendi hover'ını yememeli

Neyi seçmek üzere olduğunuzu göstermenin bariz yolu üstüne bir kutu çizmektir. Bariz uygulama ise anında bozulur: kutu imlecin altına girdiği anda mouseover öğede değil kutuda tetiklenir ve vurgu kendini takip etmeye başlar.

Bunu iki şey çözer. Katmana pointer-events: none vermek, böylece fare için görünmez olur. Bir de hover işleyicisinde katmanı ve rozetini doğrudan yok sayan bir koruma, çünkü sayfa yine de onlara olay gönderebilir.

Çalmaya değer bir ayrıntı daha: sayfanın geri kalanını karartmak için ikinci bir öğe gerekmiyor. Vurgunun üzerindeki tek bir box-shadow: 0 0 0 9999px rgba(0,0,0,.1) dışarıda kalan her yeri boyar — dört öğe yerine bir öğe ve senkronda tutulacak bir yerleşim yok.

Hover, çizebileceğinizden çok daha sık tetiklenir

Yoğun bir sayfada mouseover kare başına defalarca gelir. Kutuyu her birinde yeniden konumlandırmak boşa iştir ve tam da gösterilmesi en zor sayfalarda gecikme olarak görünür. requestAnimationFrame ile kare başına tek güncellemeye indirin ve bekleyeni her seferinde iptal edin.

Neye yapışmalı

Etikete tıklarsınız; tarayıcı imlecin altındaki en derin öğeyi bildirir ve bu, düğmenin içindeki bir <span>'dir. O span'in seçicisi, bir tıklama tetikleyicisinin istediği şey değildir.

Seçici, gerçekten eylenebilir olan en yakın ataya tırmanır:

Tıklamanın üstünde bunlardan hiçbiri yoksa cevap tıklanan öğenin kendisidir. Bu listeyi bilmek akademik değil pratiktir: hiçbir şeye basmadan önce seçicinin size ne vereceğini söyler.

Tag Master'ın seçicisi yukarıdakilerin hepsini yapar; kararlı bir seçici, bir JS yolu, öğenin nitelikleri ve metnini geri verir, sonra bunları GTM'e kopyalayabileceğiniz bir tetikleyici koşuluna ve değişkene çevirir.

Escape birine haber vermeli

Escape'te iptal eden bir seçici asgari beklentidir. Gözden kaçması kolay olan kısım şu: seçimi isteyen panel farklı bir bağlamdır ve beklemektedir. Sessizce iptal ederseniz, elindeki zaman aşımı dolana kadar bekler; artık hiçbir şeyin olmadığı bir sayfanın üstünde dönen bir bekleme göstergesi gösterir. İptalin geri dönmesi gerekir — yokluk olarak değil, sonuç olarak.

Hata fırlatan o seçici çağrısı

Aday bir seçicinin benzersiz olup olmadığını anlamak, querySelectorAll çağırıp saymak demektir. O çağrı bozuk bir seçici için sıfır döndürmez — hata fırlatır. Modern sınıf adları da seçiciyi bozan karakterlerle doludur: hover:bg-blue-500 iki nokta içerir, md:w-1/2 iki nokta ve eğik çizgi.

Yani iki savunma gerekir ve ikisi de şarttır. Seçiciyi kurarken sınıf adlarını kaçırın, bir de eşleşme sayımını yine de try/catch içine alın; çünkü yakalanmamış bir hata fırladığı gün, seçici bir sayfada sessizce ölür ve nedenini bilemezsiniz.

Hover'ın imkânsız olduğu durum

Bazı şeylerin üstüne gelinemez. Fare çıkınca kapanan bir açılır liste, kaybolan bir ipucu balonu, imleç ayrılır ayrılmaz toplanan bir menü — istediğiniz öğe, ona tıklamaya giderken yok olur.

Bunun etrafından dolaşmanın yolu imleci bırakmaktır: öğenin içindeki metni, kopyalamak için seçer gibi seçin ve aracın seçimi okumasını sağlayın. Bir seçimin çıpası genellikle bir metin düğümüdür, dolayısıyla asıl istediğiniz onun üst öğesidir. Aynı seçici mantığı, hiç hover yok.

Bunlar size neden lazım

Çünkü bir seçici size şaşırtıcı bir şey verdiğinde sebepleri bunlardır. Span yerine düğmeye yapıştı, çünkü tırmanma listesi öyle diyor. Hiçbir şey döndürmedi, çünkü sınıf adları seçiciyi bozdu. Takılmış gibi göründü, çünkü bir iptal geri ulaşmadı. Mekanizmayı bilmek, ara sıra tuhaflaşan bir aracı öngörebildiğiniz bir araca çevirir.

İlgili rehberler

Kendi sitenizde deneyin

Tag Master ücretsizdir, hesap istemez ve hiçbir veri toplamaz.

Chrome'a Ekle — Ücretsiz