Abweichende Browser-Implementierungen der Eigenschaft pointer-events

Ein neues Feature in der HTML5-Spezifikation ist die Eigenschaft pointer-events. Das W3C definiert die pointer-events Eigenschaft im Rahmen des SVG-Standards und beschreibt, dass das Setzen der Eigenschaft Auswirkungen darauf hat, ob eine skalierbare Vektorgrafik das Ziel eines Click-Events (z.B. Mausklick) werden kann oder nicht.

Leider ist HTML5 noch kein verabschiedeter Standard sondern ein in der Entwicklung befindlicher Standard (work-in-progress proposal). Browserhersteller müssen daher diese Vorschläge nicht strikt implementieren, sondern haben einen gewissen Handlungsspielraum. Schaut man in die pointer-events Beschreibung von WebKit, so findet man dort die Angabe, dass es Bugs in der Implementierung bei Mozilla (Bug 380573) und WebKit (Bug 11395) selbst gibt.

Die Gecko Rendering Engine (verwendet im Mozilla Firefox) als auch die WebKit HTML-Rendering-Engine implementieren die pointer-events, entgegen dem W3C-Vorschlag, nicht nur für Vektorgrafiken (SVG), sondern für alle HTML-Elemente. Praktisch führt dieses unterschiedliche Verhalten zu einem Problem, das ich kurz vorstellen möchte.

Im folgenden Beispiel wird ein roter Container (div #clickMe) mit einer Größe von 400×400 Pixel definiert, welcher beim Anklicken „You have clicked me“ (dt. Du hast mich angeklickt) in die Konsole schreibt. Der Container besitzt außerdem das Attribut pointer-events: none, was im Mozilla Firefox (getestet mit Version 12.0) und im Google Chrome (getestet mit Version 21.0.1160.0 canary) dazu führt, dass der Container gar nicht angeklickt werden kann. Das heißt, bei Klick auf den Container im Firefox und im Chrome passiert nichts.

Interessant wird es beim aktuellen Internet Explorer. Die Windows Internet Explorer 10 Release Preview (Version 10.0.8400.0) hält sich an die Vorgaben des W3C. Das hat den Effekt, dass die pointer-events-Eigenschaft eben nur für Scalable Vector Graphics gilt und auf DIV-Container nicht angewandt werden kann. Beim Klick auf den roten Container wird im IE10 also eine Konsolenausgabe erzeugt.

Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>pointer-events Test</title>
    <meta charset="utf-8">
    <style>
      #clickMe{
        pointer-events: none;
        width: 400px;
        height: 400px;
        background-color: red;
      }
    </style>
    <script>
      function clickMeFunction(){
        console.log('You have clicked me.');
      }
    </script>
  </head>
  <body>
    <div id="clickMe" onclick="clickMeFunction()">Try to click me.</div>
  </body>
</html>

Lange Rede, kurze Zusammenfassung:

Mozilla Firefox und Google Chrome implementieren die pointer-events Eigenschaft für alle Elemente (außerhalb der W3C-Empfehlung)
Internet Explorer 10 implementiert die pointer-events Eigenschaft nur für SVGs (entsprechend der W3C-Empfehlung)

SVG-Test mit pointer-events: none

Ich habe obiges Beispiel nochmal mit einem SVG-Element mit pointer-events: none nachgebaut und dort ist das Verhalten der Gecko, WebKit und Trident-Engine offensichtlich gleich. Beide führen beim Klick auf das Rechteck die onclick-Methode nicht aus und bekommen auch keine event.target.id geliefert.

<!DOCTYPE html>
<html>
  <head>
    <title>pointer-events SVG-Test</title>
    <meta charset="utf-8">
    <style>
      #clickMe{
        pointer-events: none;
        width: 400px;
        height: 400px;
        background-color: red;
      }
    </style>
    <script>
      function clickMeFunction(){
        console.log('You have clicked me.');
      }
 
      document.onclick = function(event){
        // event.target.id is not defined in Mozilla, Chrome and IE10 :-)
        console.log('You haved clicked on: '+event.target.id);
      }
    </script>
  </head>
  <body>
    <svg id="clickMe" onclick="clickMeFunction()"></svg>
  </body>
</html>

Standardwert-Test

Interessant zu wissen ist auch, dass der Standardwert (default value) für die pointer-events-Eigenschaft in den Browsern ebenfalls unterschiedlich ist. Der Internet Explorer 10 nimmt als Standardwert visiblePainted oder none, während Firefox und Chrome mit auto arbeiten.

<!DOCTYPE html>
<html>
  <head>
    <title>pointer-events Default Value Test</title>
    <meta charset="utf-8">
    <style>
      #clickMe{
        width: 400px;
        height: 400px;
        background-color: red;
      }
    </style>
  </head>
  <body>    
    <svg id="clickMe" onclick="clickMeFunction()"></svg>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
      var element = $("#clickMe");
      var style = element.css("pointer-events");
      alert("pointer-events: "+style);
    </script>
  </body>
</html>

Code-Beispiel

Lange Rede, kurze Zusammenfassung:

SVG-Test mit pointer-events: none

Standardwert-Test

Schreibe einen Kommentar Antworten abbrechen