auxclick Chrome 55'e geliyor

Cem Posnick
Jeff Posnick

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);