İleriye doğru yönlendirme

Sérgio Gomes

Web'deki içeriklere odaklanmak eskiden basitti. Fareniz vardı, hareket ettirdiniz bazen düğmelere basıyordunuz. İşte bu kadar. olmayan her şey bir şekilde emüle ediliyordu ve geliştiriciler tam olarak neye güveneceklerini biliyordu.

Fakat basitlik her zaman iyi anlamına gelmez. Zaman içinde gittikçe daha fazla her şeyin fare olmadığı (veya fare gibi davranıldığı) çok önemli değildi: Olağanüstü yaratıcı özgürlük için basınca duyarlı ve eğime duyarlı kalemler; CANNOT TRANSLATE Ancak parmaklarınızı kullanın. Bu yüzden, ihtiyacınız olan tek şey cihaz ve elinizdi. hey, neden birden fazla parmağınız yok mu?

Dokunma etkinlikleri düzenledik yardımcı olacak olsa da bunlar tamamen ayrı bir API'dir. ve bu da sizi iki ayrı etkinlik modeli kodlamaya zorlayarak hem fare hem de dokunmayı desteklemek istiyor. Chrome 55 daha yeni bir standartla sunuluyor Bu etkinlik her iki modeli birleştiriyor: işaretçi etkinlikleri.

Tek etkinlik modeli

İşaretçi etkinlikleri, Dokunma, kalemleri ve fareleri bir araya getiren, tarayıcı için işaretçi giriş modeli tek bir etkinlik grubuna böler. Örneğin:

document.addEventListener('pointermove',
    ev => console.log('The pointer moved.'));
foo.addEventListener('pointerover',
    ev => console.log('The pointer is now over foo.'));

Aşağıda mevcut tüm etkinliklerin listesi verilmiştir. Bu etkinlikler size aşağıdaki örneklerden faydalanabilirsiniz:

pointerover	İşaretçi, öğenin sınırlayıcı kutusuna girdi. Bu işlem, fareyle üzerine gelme özelliğini destekleyen cihazlarda hemen veya olmayan cihazlar için pointerdown etkinliği.
pointerenter	pointerover özelliğine benzer, ancak baloncuk ve herkese açık kullanıcı adı yok alt öğeleri farklı olabilir. Spesifikasyonla ilgili ayrıntılı bilgi.
pointerdown	İşaretçi, etkin düğme durumuna gelmiştir. Düğmelerden biri veya iletişim kurduğunuzda kullanılan giriş cihazı.
pointermove	İşaretçinin konumu değişti.
pointerup	İşaretçi, etkin düğme durumundan ayrıldı.
pointercancel	Bir hata oluştu. Bu durum, işaretçinin daha fazla etkinlik. Bu, devam etmekte olan tüm işlemleri iptal edip nötr giriş durumuna getirin.
pointerout	İşaretçi, öğenin veya ekranın sınırlayıcı kutusundan ayrıldı. Ayrıca, bir Cihaz, fareyle üzerine gelme özelliğini desteklemiyorsa pointerup.
pointerleave	pointerout özelliğine benzer, ancak baloncuk ve herkese açık kullanıcı adı yok alt öğeleri farklı olabilir. Spesifikasyonla ilgili ayrıntılı bilgi.
gotpointercapture	Öğe, işaretçi yakalama aldı.
lostpointercapture	Yakalanan işaretçi yayınlandı.

Not: İşaretçi etkinliklerinin pointer-events CSS property ile karıştırılabilecek düzeyde ilişkisi yoktur. Daha da kötüsü, ikisi birlikte kullanılabilir. Kullanıcının davranışı İşaretçi etkinlikleri (etkinlik) içeren pointer-events (CSS mülkü) modeli), fare etkinlikleri veya dokunma etkinliklerinden CSS mülkünü daha önce kullandıysanız ne beklemeniz gerektiğini biliyorsunuz.

Farklı giriş türleri

İşaretçi Etkinlikleri, genellikle girişten bağımsız bir şekilde kod yazmanıza olanak tanır. Böylece farklı giriş cihazları için ayrı etkinlik işleyiciler kaydetmeniz gerekmez. Elbette, giriş türleri arasındaki farklılıklara da dikkat etmeniz gerekir. Örneğin, fareyle üzerine gelme kavramı geçerlidir. Farklı giriş cihazı türlerini birbirinden ayırt etmek (örneğin, her ikisine de ayrı kodları/işlevleri kullanabilirsiniz. Ancak bunu öğesinin pointerType özelliğini kullanarak aynı etkinlik işleyicilerde PointerEvent kullanır. Örneğin, yan gezinme çekmecesi kodluyor olsaydınız pointermove etkinliğinizde aşağıdaki mantığı kullanın:

switch(ev.pointerType) {
    case 'mouse':
    // Do nothing.
    break;
    case 'touch':
    // Allow drag gesture.
    break;
    case 'pen':
    // Also allow drag gesture.
    break;
    default:
    // Getting an empty string means the browser doesn't know
    // what device type it is. Let's assume mouse and do nothing.
    break;
}

Varsayılan işlemler

Dokunmatik özellikli tarayıcılarda, sayfayı kaydırmak, yakınlaştırmak veya yenilemek için belirli hareketler kullanılır. Dokunma etkinlikleri durumunda, bu varsayılan ayar olduğunda etkinlikleri almaya devam edersiniz işlemler gerçekleşiyor. Örneğin, kullanıcı sayfayı kaydırırken touchmove tetiklenmeye devam edecek.

İşaretçi etkinlikleri sayesinde, kaydırma veya yakınlaştırma gibi varsayılan bir işlem tetiklendiğinde, Tarayıcının şunları yaptığını bildiren bir pointercancel etkinliği alacaksınız: kontrol edebilirsiniz. Örneğin:

document.addEventListener('pointercancel',
    ev => console.log('Go home, the browser is in charge now.'));

Yerleşik hız: Bu model varsayılan olarak daha iyi performansa olanak tanır. daha fazla dönüşüm elde etmek için pasif etkinlik işleyiciler elde etmenize yardımcı olur.

Tarayıcının kontrolü ele geçirmesini engellemek için touch-action CSS mülkü. Bir öğede none değerine ayarlanırsa tüm öğeler devre dışı bırakılır tarayıcı tarafından tanımlanan işlemlerin bu öğe üzerinden başlatılmasını sağlar. Ama pek çok farklı izin vermek için pan-x gibi daha ayrıntılı kontrol için diğer değerler ancak y eksenindeki harekete tepki vermesi için tarayıcının bunu yapması gerekir. Chrome 55 sürümü aşağıdaki değerleri destekler:

auto	Varsayılan; tarayıcı, varsayılan herhangi bir işlemi gerçekleştirebilir.
none	Tarayıcının varsayılan işlem yapmasına izin verilmez.
pan-x	Tarayıcının yalnızca varsayılan yatay kaydırma işlemini gerçekleştirmesi gerekir.
pan-y	Tarayıcının yalnızca dikey kaydırma varsayılan işlemini gerçekleştirmesi gerekir.
pan-left	Tarayıcının yalnızca yatay kaydırma varsayılan işlemini gerçekleştirmesi gerekir. kaydırmak için de kullanılır.
pan-right	Tarayıcının yalnızca yatay kaydırma varsayılan işlemini gerçekleştirmesi gerekir. sağa kaydırmasını sağlar.
pan-up	Tarayıcının yalnızca dikey kaydırma varsayılan işlemini gerçekleştirmesi gerekir. ve yalnızca sayfayı yukarı kaydırmak için kullanılır.
pan-down	Tarayıcının yalnızca dikey kaydırma varsayılan işlemini gerçekleştirmesi gerekir. ve yalnızca sayfayı aşağı kaydırır.
manipulation	Tarayıcının yalnızca kaydırma ve yakınlaştırma işlemleri yapmasına izin verilir.

İşaretçi yakalama

Bozuk bir mouseup için hata ayıklayarak sinir bozucu bir saat harcadınız kullanıcının düğmeyi bırakması olduğunu fark edinceye kadar tıklama hedefinizin dışında mı? Cevabınız hayır mı? Tamam, belki yalnızca bendim.

Yine de şu ana kadar bu sorunu çözmek için gerçekten iyi bir yol yoktu. Tabii ki, dokümanda mouseup işleyicisini ayarlayıp bazı durumlarda uygulamanızı indirin. En temiz çözüm bu değil ama özellikle de bir web bileşeni oluşturuyor ve her şeyin düzgün ve güzel izole.

İşaretçi etkinlikleri çok daha iyi bir çözüm sunar: İşaretçiyi yakalayabilirsiniz. olduğundan emin olmak için pointerup etkinliği (veya arkadaşlar).

const foo = document.querySelector('#foo');
foo.addEventListener('pointerdown', ev => {
    console.log('Button down, capturing!');
    // Every pointer has an ID, which you can read from the event.
    foo.setPointerCapture(ev.pointerId);
});

foo.addEventListener('pointerup', 
    ev => console.log('Button up. Every time!'));

Tarayıcı desteği

İşaretçi Etkinlikleri, yazıldığı sırada Internet Explorer 11'de desteklenir. Microsoft Edge, Chrome ve Opera'dır ve Firefox'ta kısmen desteklenir. Şunları yapabilirsiniz: Güncel listeyi caniuse.com'da bulabilirsiniz.

İşaretçi Etkinlikleri çoklu dolgusunu gibi sorular sorabilirsiniz. Alternatif olarak, çalışma zamanında tarayıcı desteği olup olmadığını kontrol etmek basittir:

if (window.PointerEvent) {
    // Yay, we can use pointer events!
} else {
    // Back to mouse and touch events, I guess.
}

İşaretçi etkinlikleri, ilerlemeyi artırmak için mükemmel bir adaydır. yukarıdaki kontrolü yapmak için başlatma yöntemlerinizi değiştirin, işaretçi etkinliği ekleyin işleyicileri olup olmadığını kontrol edin ve fare/dokunma etkinlik işleyicileriniziif else blok.

Siz de onları deneyin ve düşüncelerinizi bizimle paylaşın.