Bir tıklama ne zaman bir click
değildir? Karmaşık bir kullanıcı arayüzü üzerinde çalışan bir web geliştiricisi için
bu, soyut bir felsefi soru değildir. Özel fare girişi davranışı uyguluyorsanız kullanıcının niyetini göz önünde bulundurmak çok önemlidir. Örneğin, bir kullanıcı faresinin orta düğmesiyle bir bağlantıyı tıklarsa, bu bağlantının içeriğini içeren yeni bir sekme açmak istediğini varsaymak mantıklıdır. Bir kullanıcı rastgele bir kullanıcı arayüzü öğesini orta tıklarsa bunun yanlışlıkla yapıldığını varsaymak ve bu girişi yoksaymak isterken birincil düğme tıklamasının kullanıcı arayüzünden bir yanıt tetiklemesi beklenir.
Biraz zahmetli olsa da bu incelikli etkileşimleri tek bir click
etkinlik işleyici aracılığıyla modellemek mümkündür. MouseEvent
öğesinin button
özelliğini açık bir şekilde kontrol ederek birincil düğmeyi temsil eden 0
değerine veya diğer herhangi bir şeye karşılık olarak 1
genellikle orta düğmeyi temsil eder ve bu şekilde ayarlanır. Ancak pek fazla geliştirici button
özelliğini açık bir şekilde kontrol etmez ve bu da hangi düğmeye basıldığından bağımsız olarak click
öğelerinin tamamını aynı şekilde işleyen koda yol açar.
Chrome 55'ten itibaren, auxclick
adlı yeni bir MouseEvent
türü, birincil olmayan bir düğmeyle yapılan tıklamalara yanıt olarak tetiklenir. Bu yeni etkinliğe, click
etkinliğinin davranışında karşılık gelen bir değişiklik eşlik eder. Etkinlik yalnızca birincil fare düğmesine basıldığında etkinleşir. Bu değişikliklerin, web geliştiricilerinin MouseEvent.button
özelliğini özel olarak kontrol etmek zorunda kalmadan yalnızca önem verdikleri tıklama türlerine yanıt veren etkinlik işleyiciler yazmalarını kolaylaştıracağını umuyoruz.
Yanlış pozitifleri azaltma
Daha önce de belirtildiği gibi, auxclick
oluşturmanın amaçlarından biri "middle-click-a-tab" davranışını yanlışlıkla geçersiz kılan özel click
işleyicilerin dağıtılmasından kaçınmaktı. Örneğin, konum çubuğunu yeniden yazmak ve özel tek sayfa gezinmeleri uygulamak için History API'yi kullanan bir click
etkinlik işleyici yazdığınızı düşünün. Şöyle bir şey olabilir:
document.querySelector('#my-link').addEventListener('click', event => {
event.preventDefault();
// ...call history.pushState(), use client-side rendering, etc....
});
Özel mantığınız, bir farenin birincil düğmesi tarafından tetiklendiğinde beklendiği gibi çalışabilir, ancak bir orta düğme tıklandığında bu kod çalışırsa aslında yanlış pozitiftir. Yeni davranıştan önce, varsayılan olarak kullanıcınızın beklentilerine uygun olmayan yeni bir sekme açılması işlemini engelliyordunuz.
İşleyicinizin başında event.button === 0
olup olmadığını açıkça kontrol edip kodu yalnızca bu durumda yürütebilirsiniz ancak bunu kolayca unutabilir veya bunun gerekli olduğunu asla fark edemezsiniz.
Yalnızca ihtiyacınız olan kodu çalıştırın
Daha az yanlış pozitif sonuç ise auxclick
geri çağırmalarının yalnızca gerçekten birincil olmayan bir fare düğmesi tıklandığında çalıştırılmasıdır. Örneğin, yeni bir sekme açmadan önce uygun bir hedef URL'yi hesaplaması gereken bir kodunuz varsa auxclick
kodunu dinleyebilir ve geri çağırmanıza bu mantığı ekleyebilirsiniz. Birincil fare düğmesi tıklandığında çalışma ek yüküne yol açmaz.
Tarayıcı desteği ve uyumluluk
Bu yeni davranış şu anda yalnızca Chrome 55'te uygulanmaktadır. İlk teklifte belirtildiği gibi, web geliştiricisi topluluğundan gelen (olumlu ve olumsuz) geri bildirimler değerlidir. Geri bildiriminizi standartlaştırma süreci üzerinde çalışan kişilerle paylaşmanın en iyi yolu GitHub sorunu göndermektir.
Bu sırada, geliştiriciler, fare etkinliklerini yönetmeye yönelik bazı en iyi uygulamaları takip etmek için auxclick
eklentisinin yaygın olarak kullanıma sunulmasını beklemek zorunda kalmıyor. click
etkinlik işleyicinizin başında MouseEvent.button
özelliğinin değerini kontrol etmeye zaman ayırırsanız uygun işlemi yaptığınızdan emin olabilirsiniz. Aşağıdaki kalıp, auxclick
için yerel destek olup olmadığına bakılmaksızın birincil ve yardımcı tıklamaları farklı şekilde ele alacaktır:
function handlePrimaryClick(event) {
// ...code to handle the primary button click...
}
function handleAuxClick(event) {
// ...code to handle the auxiliary button click….
}
document.querySelector('#my-link').addEventListener('click', event => {
if (event.button === 0) {
return handlePrimaryClick(event);
}
// This provides fallback behavior in browsers without auxclick.
return handleAuxClick(event);
});
// Explicitly listen for auxclick in browsers that support it.
document.querySelector('#my-link').addEventListener('auxclick', handleAuxClick);