Auf Touch und Click-Events reagieren mit jQuery

Im modernen Web tummeln sich nicht nur Desktops und Laptops sondern auch Smartphones, Tablets und viele andere Geräte. Entsprechend vielfältig sind die Eingabemethoden. Einen Desktop-PC bedient man am Liebsten mit der Maus und bei einem Smartphone wischt man gerne mit dem Finger drüber. Diese beiden Bedienkonzepte (Click und Touch) müssen berücksichtigt werden. In jQuery kann man dazu verschiedene Event-Typen benutzen, an die man sich im Code bindet.

Beispiel:

$('#container').bind('mousedown touchstart', function () {
  var $target = $(event.target);
  alert('Clicked on: '+$target.attr('id'));
});

Microsoft macht es einem sogar noch einfacher und vereint alle wichtigen Eingabemethoden zu einem neuen Event, so dass man nicht mehr auf mousedown und touchstart seperat achten muss. Alles was einen als Programmierer im Internet Explorer 10 zu interessieren hat, sind Events von MSPointer (siehe Touch Input for IE10 and Metro style Apps und Pointer and gesture events).

Leider gibt es MSPointer nur im IE10 (und in Metro-Apps). Deswegen muss man als Fallback die komplizierte Lösung einsetzen, um auch andere Browser abzudecken.

Komplettes Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>Mouse / Touch-Events</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
      #container{
        width: 400px;
        height: 400px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
      jQuery(document).ready(function($){ 
        var element  = $('#container');
        var eventType = 'mousedown touchstart';
 
        if (window.navigator.msPointerEnabled)
          eventType = 'MSPointerDown';
 
        element.bind(eventType, function () {
          alert('Hello World from '+eventType+'.');
        });
      });
    </script>
  </body>
</html>

Möchte man sich nur an das Mouse-Event oder das Touch-Event heften, so kann man den unterstützten Event-Typ auch abfragen und sich dann daran binden:

Beispiel:

<script>
jQuery(document).ready(function($){ 
  var element = $('#container');         
  var eventType = ((document.ontouchstart!==null)?'mousedown':'touchstart');        
 
  element.bind(eventType, function () {
    if(eventType == 'mousedown'){
      alert('You clicked me!');
    }else{
      alert('You touched me!');
    }
  });
});
</script>

Schreibe einen Kommentar Antworten abbrechen