Bir tıklama ne zaman click olarak kabul edilmez? 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ı amacını göz önünde bulundurmanız çok önemlidir. Örneğin, bir kullanıcı farenin 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ı olur. Kullanıcı rastgele bir kullanıcı arayüzü öğesini orta tıkladığında bunun yanlışlıkla yapıldığını varsayabilir ve bu girişi yoksayabilirsiniz. Birincil düğme tıklamasının ise kullanıcı arayüzünden bir yanıt tetiklemesi beklenir.
Bu ayrıntılı etkileşimleri tek bir click etkinlik işleyici aracılığıyla modellemek mümkündür ancak bu işlem biraz zahmetli olabilir. MouseEvent öğesinin button özelliğini açıkça kontrol ederek birincil düğmeyi temsil eden 0 değerine mi yoksa başka bir değere mi ayarlandığını (1 genellikle orta düğmeyi temsil eder) görmeniz gerekir. Ancak birçok geliştirici, button mülkünü açıkça kontrol etmez. Bu da hangi düğmeye basıldığına bakılmaksızın tüm click öğelerini aynı şekilde işleyen bir koda yol açar.
Chrome 55'ten itibaren, birincil olmayan bir düğmeyle yapılan tüm tıklamalara yanıt olarak auxclick adlı yeni bir MouseEvent türü tetiklenir. Bu yeni etkinliğe eşlik eden click etkinliğinin davranışında da bir değişiklik yapıldı: Bu etkinlik yalnızca birincil fare düğmesine basıldığında tetiklenir. Bu değişikliklerin, web geliştiricilerin MouseEvent.button mülkünü özel olarak kontrol etmek zorunda kalmadan yalnızca önemsedikleri tıklama türüne yanıt veren etkinlik işleyicileri yazmasını kolaylaştıracağını umuyoruz.
Yanlış pozitifleri azaltma
Daha önce de belirtildiği gibi, auxclick oluşturmamızın bir nedeni de "orta tıklamayla sekme açma" davranışını yanlışlıkla geçersiz kılan özel click işleyicilerinin dağıtılmasını önlemekti. Örneğin, konum çubuğunu yeniden yazmak ve özel tek sayfalı gezinme işlemleri uygulamak için History API'yi kullanan bir click etkinlik işleyicisi yazdığınızı varsayalım. Şuna benzer bir görünüme sahip olabilir:
document.querySelector('#my-link').addEventListener('click', event => {
event.preventDefault();
// ...call history.pushState(), use client-side rendering, etc....
});
Özel mantığınız, farenin birincil düğmesi tarafından tetiklendiğinde istenen şekilde çalışabilir ancak bu kod orta düğme tıklandığında çalıştırılırsa yanlış pozitif olarak kabul edilir. Yeni davranıştan önce, yeni sekme açma varsayılan işlemini engelleyerek kullanıcınızın beklentilerini karşılamamış olurdunuz.
İşleyicinizin başında event.button === 0 değerini açıkça kontrol edebilir ve yalnızca bu durumda kodu yürütebilirsiniz. Ancak bunu unutmanız veya bunu yapmanız gerektiğini hiç fark etmemeniz kolaydır.
Yalnızca ihtiyacınız olan kodu çalıştırın
Yanlış pozitiflerin sayısının azalmasının dezavantajı, auxclick geri çağırmalarının yalnızca birincil olmayan bir fare düğmesi tıklandığında çalışacak olmasıdır. Örneğin, yeni bir sekme açmadan önce uygun bir hedef URL'yi hesaplaması gereken kodunuz varsa auxclick etkinliğini dinleyebilir ve bu mantığı geri çağırma işlevinize dahil edebilirsiniz. Birincil fare düğmesi tıklandığında çalıştırma yükü oluşturmaz.
Tarayıcı desteği ve uyumluluğu
Bu yeni davranış şu anda yalnızca Chrome 55'te uygulanmaktadır. İlk öneride belirtildiği gibi, web geliştirici topluluğundan hem olumlu hem de olumsuz geri bildirimler bekliyoruz. Bu geri bildirimi standartlaştırma sürecinde çalışan kişilerle paylaşmanın en iyi yolu GitHub sorunu bildirmektir.
Bu süre zarfında geliştiricilerin, fare etkinliklerini işlemeyle ilgili bazı en iyi uygulamaları uygulamak için auxclick'ün yaygın olarak kullanılmasını beklemesi gerekmez. click etkinlik işleyicinizin başında MouseEvent.button mülkünün değerini kontrol ederseniz 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 işler:
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);