Blog Logo Screenlight Blog

Touch Events auf leeren DIV Elementen im IE10

code example

Handhabung von TouchEvents im IE10 innerhalb von leeren HTML Elementen.

Beim erstellen eines Sliders bin ich auf ein Problem gestossen, welches mit den neuen TouchEvents, einer Render-Rule vom IE10 und einer Spezifischen Microsoft CSS-Anweisung zu tun hat. Ein kurzer Überblick:

Beim Internet Explorer 10 hat Microsoft neue Javascript Events geschaffen. Alle Events der drei Typen Maus, Touch und Pen werden neu in einem von Microsoft geschaffenen Eventkontext ausgeführt und heissen nun: MSPointerUp, MSPointerDown und MSPointerMove.

Desweiteren hat der IE10 eine Render-Rule welche leere DIV Elemente nicht rendert – selbst wenn Sie eine Grösse haben – und auf nicht gerenderten Elementen können auch keine Javascript Events ausgelöst werden.

Um dies zu umgehen muss man DIV-Element ein transparentes Hintergrundbild geben und ein   ins Element legen. So wird das Element gerendert und löst auch die beiden Javascript Events MSPointerUp und MSPointerDown korrekt aus. Um das MSPointerMove Event auszulösen, muss man dem Wrapper-DIV zusätzlich die CSS Anweisung ‘-ms-touch-action: none’ geben.

<div id="empty">
  &nbsp;
</div>
#empty {
	background: url(empty.png) top left no-repeat transparent;
	-ms-touch-action: none;
}

Leave a Response

2 Responses to “Touch Events auf leeren DIV Elementen im IE10”

MK
July 9th, 2013 at 11:43 pm

Super Post! Moeglicherweise koennte es anstelle eines durchsichtigen Hintergrundbildes auch mit einer Hintergrundfarbe und einer Opacity von 0.000001 gehen. Ein Asset weniger.

July 10th, 2013 at 6:32 am

Dazu wird auf verschiedenen Helpsites geraten, hat aber in meinem Fall nicht funktioniert. Bin deshalb auf das Hintergrundbild ausgewichen. Bei gewissen anderen Personen scheint aber bereits das geholfen zu haben. Eventuell zuerst so probieren und erst wenns dann noch immer nicht gerendert wird mit dem Background-Image versuchen?