Mäuse, Finger und Stifte unter einen Hut bringen

Wer mit JavaScript arbeitet kennt sicherlicht die Mouse-Events (onmousedown, onmousemove, onmouseup). Diese Events lassen sich jedoch nicht für Touch-Eingaben verwenden, denn dort gibt es: ontouchstart, ontouchmove und ontouchend.

Noch interessanter wird es mit Windows 8 und dem Internet Explorer 10. Windows 8 kann auf vielen unterschiedlichen Geräten (Tablets, Desktop, Laptops) eingesetzt werden und reagiert daher auf Stift-, Maus- und Toucheingaben.

Um diese ganzen Kategorien unter einen Hut zu bringen, habe ich eine geräteübergreifende Lösung entwickelt:

(Vanilla) JavaScript:

var box = document.getElementById('box');
 
if(window.navigator.msPointerEnabled) {
  // IE10, Windows 8, mouse/touch/pen device
  box.addEventListener('MSPointerDown',function(event){
    alert('You hit me with a mouse, your finger or a pen!');
  },false);        
}
else if('ontouchstart' in window){
  // touch device
  box.addEventListener('touchstart',function(event){
    alert('You hit me with your finger!');
  },false);      
}
else{
  // mouse device
  box.addEventListener('mousedown',function(event){
    alert('You hit me with a mouse!');
  },false);      
}

jQuery:

var box = $('#box');
 
if(window.navigator.msPointerEnabled) {
  // IE10, Windows 8, mouse/touch/pen device
  box.on('MSPointerDown',function(event){
    alert('You hit me with a mouse, your finger or a pen!');
  });
}
else if('ontouchstart' in window){
  // touch device
  box.on('touchstart',function(event){
    alert('You hit me with your finger!');
  });
}
else{
  // mouse device
  box.on('mousedown',function(event){
    alert('You hit me with a mouse!');
  });
}

Schreibe einen Kommentar Antworten abbrechen