turuncukafalikiz
New member
Fare Olayları ve Dokunma Olayları, ancak daha basit: İşaretçi Olayları API’sı
Şubat ayında W3C, Pointer Events API’yi bir öneri olarak yayınladı. Bu ve tarayıcı üreticisi Google’ın (geçmişte biraz ileri geri gittikten sonra) artık Pointer Events API’yi (Apple’ın ısrar ettiği gibi Touch Events API’sini değil) uygulamaya karar vermiş olması, bir fırsat olarak değerlendirilmelidir, ancak sadece göstermek için ne olduğunu sen
İşaretçi olayları (aynı ada sahip CSS özelliği işaretçi olayları ile karıştırılmamalıdır) ilk olarak Microsoft tarafından Internet Explorer 10 için sunulmuştur. Basitçe söylemek gerekirse, fare ve dokunma olaylarını, diğer şeylerin yanı sıra, soyutlama aygıtları giriş aygıtları gibi özetleyerek özetlerler: işaretleme aygıtı olarak fareler ve dokunmatik kalemler. Ancak, API şu anda yalnızca Internet Explorer ve halefi Edge (hem masaüstü hem de mobil sürümler) tarafından desteklenmektedir. Diğer tarayıcılar için, Pointer Events Polyfill veya kısaca PEP gibi çoklu dolgular kullanmanız gerekiyordu.
Bir süreliğine, IE’nin bu API’yi uygulayan tek tarayıcı olarak kalacağı ve diğer tarayıcı üreticilerinin (özellikle Apple) tematik olarak ilgili Touch Events API’sine güvenmeyi tercih edecekleri görüldü. Google Chrome posta listesinde duyurulur Rick ByerGoogle’da yazılım mühendisi, ancak birkaç ay önce Chrome ekibinin Pointer Events API’sini uygulama niyeti:
“Geçen yıl, Pointer Events standardına dahil olmamıza rağmen, Chromium’da Pointer Events uygulamak yerine mevcut API’lerde (Touch Events gibi) artan iyileştirmelere odaklanacağımızı duyurmuştuk. O zamandan beri, işaretçi olaylarını platforma son derece değerli bir katkı olarak gördüklerini belirten web geliştiricileri, çerçeve yazarları ve diğer tarayıcı satıcıları, bu geri bildirimi çok ciddiye almalıyız.”
API’ye bir bakış
Toplamda API, halihazırda bilinen fare olaylarıyla aşağı yukarı eşlenebilen 10 farklı işaretçi olay türü tanımlar:
- Işaretçi: İşaretleme aygıtı bir öğeye girer (üzerine gelin)
- işaretçigir: Benzer Işaretçiancak olay balonları olmadan (fare girişi)
- işaretçi aşağı: İşaretleme aygıtı etkinleştirildi veya “it” (mousedown)
- işaretçi hareketi: İşaretleme aygıtı bir öğe içinde hareket ettirilir (fare hareketi)
- Işaretçi: İşaretleme aygıtı devre dışı veya “bırak” (fare yukarı)
- İşaretçi iptali: işaretleme aygıtı durduruldu, yani artık etkinlik göndermiyor (eşdeğeri yok)
- Işaretçi: işaretçi bir öğe bırakır (fareyle dışarı çıkma)
- Işaretçi: Benzer Işaretçiancak olay balonları olmadan (fare bırak)
- işaretçi yakalama: Öğe, işaretçi olaylarını yakalar (eşdeğeri yoktur)
- kayıp işaretçi yakalama: Öğe artık işaretçi olaylarını algılamaz (eşdeğeri yoktur)
- Işaretçi: İşaretçi aygıtı kimliği (örneğin, çoklu dokunma uygulamalarında tek tek işaretçi aygıtları arasında ayrım yapmak için gereklidir)
- uzunluk: İşaretleme aygıtı pedinin genişliği
- yükseklik: İşaretleme aygıtının temas noktasının yüksekliği
- baskı yapmak: 0 ila 1 değer aralığında uygulanan basıncın gösterimi
- eğimX: İşaretçi aygıtının yatay eğimi
- eğimY: İşaretleme aygıtının dikey eğimi
- işaretçiTürü: İşaretçi aygıtı türü (fare, tüy veya dokunma)
- Birincil: Olayı tetikleyen işaretleme aygıtının birincil işaretleme aygıtı olup olmadığını gösteren Boole göstergesi
Son olarak, yeni CSS özelliği dokunma eylemi Karşılık gelen işaretçi olayları için standart tarayıcı eylemlerinin gerçekleştirilip gerçekleştirilmeyeceğini belirleyebilirsiniz.
basit bir örnek
Yeter teori. Yukarıdakilerin basit bir örneği aşağıdaki listede gösterilmiştir. bunun sonucunda
-Kimliği “yakalama” olan öğe, farklı olaylar için olay işleyicilerini kaydeder. adı verilen yöntem handleEvent() ayrıca alınan olayın tüm ilgili özelliklerini de verir.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Beispiel zur Pointer Events API</title>
<style>
#capture {
background-color: green;
height: 250px;
width: 250px;
}
</style>
<!-- Einbinden des Polyfills PEP -->
<script src="https://code.jquery.com/pep/0.3.0/pep.js"></script>
</head>
<body onload="initialize()">
<script>
function handleEvent(event) {
console.log('Pointer ID:' + event.pointerId); // ID des Pointer, um
// verschiedene Pointer
// bei Multi-Touch-
// Anwendungen zu
// unterscheiden
console.log('Width:' + event.width); // Breite des Pointer
console.log('Height:' + event.height); // Höhe des Pointer
console.log('Pressure:' + event.pressure); // Druck (im Wertebereich
// 0 bis 1)
console.log('Tilt X:' + event.tiltX); // Neigung des Pointer
// zwischen Y- und Z-Ebene
console.log('Tilt Y:' + event.tiltY); // Neigung des Pointer
// zwischen X- und Z-Ebene
console.log('Pointer Type:' + event.pointerType); // Typ des Pointer:
// mouse, pen oder
// touch
console.log('Is primary:' + event.isPrimary); // Angabe, ob der Pointer
// den Primärpointer
// darstellt,
// interessant für
// Multi-Touch-Anwendungen
}
function initialize() {
console.log('initialize');
var element = document.getElementById('capture');
var events = [
'pointerdown', // Pointing Device betritt ein Element
'gotpointercapture', // Element fängt Pointer-Events ab
// (kein Äquivalent)
'lostpointercapture', // Element fängt nicht mehr länger
// Pointer-Events ab (kein Äquivalent)
'pointerenter', // Ähnlich zu pointerover, aber
// ohne Event-Bubbling
'pointerdown', // Pointing Device wird aktiviert
// bzw. "drückt"
'pointermove', // Pointing Device wird innerhalb
// eines Elements bewegt
'pointerup', // Pointing Device wird deaktiviert
// bzw. "lässt los"
'pointercancel', // Pointing Device wird abgebrochen,
// d.h. sendet keine weiteren Events mehr
'pointerout', // Pointer verlässt ein Element (mouseout)
'pointerleave' // Ähnlich zu pointerout, aber ohne
// Event-Bubbling (mouseleave)
];
for (var i = 0; i < events.length; i++) {
var eventType = events;
element.addEventListener(events, (function (eventType) {
return function (event) {
console.log(eventType);
handleEvent(event);
}
})(eventType));
}
}
</script>
<div id="capture" style="touch-action:none">
</div>
</body>
</html>
Çözüm
Pointer Events API, fareler, dokunmatik kalemler vb. gibi işaretleme aygıtlarını özetler. veya daha soyut bir düzeyde bu tür girdi aygıtıyla ilişkili olaylar. Tarayıcı desteği şu anda zayıf görünüyor, ancak Google’ın şimdi API’yi kullanıma sunma vaadinde de biraz gecikme olabilir. O zamana kadar Polyfill PEP’e geri dönebilirsiniz.
()
Haberin Sonu