— Actionscript Programmierer . Patrick Tresp

Internet Explorer 8 and all the fun stuff: e.stopPropagation, e.preventDefault, mousedown….

When working with JQuery, it seems all work is taken over by the library.
Actually it does, unless a client tells you afterwards, Internet Explorer 8 is still his/her weapon of choice, next to the ipad of course.
A really funny combination of technical aspects, but client is king, lets make him feel that way.

A real pain is that IE8 is not able to use event.preventDefault() nor event.stopPropagation().

For this, its helpful to use a function that will end the event, no matter what browser:

Step 01. make sure to stop Events

function stopEvent(e) {
 
	if(!e) var e = window.event;
 
	//e.cancelBubble is supported by IE -
        // this will kill the bubbling process.
	e.cancelBubble = true;
	e.returnValue = false;
 
	//e.stopPropagation works only in Firefox.
	if ( e.stopPropagation ) e.stopPropagation();
	if ( e.preventDefault ) e.preventDefault();		
 
       return false;
}

Step 02: adding and removing the listeners.

Since IE (8) does not support addEventListener or removeEventListener etc. the element needs to be checked, whether it supports addEventListener or attachEvent ( IE )

function addListeners( el )
{// Allow function call without passing parameters
	var e = el;
	if( !e )  e = document.getElementById('myDiv');
	var el = e;
 
	if( el )
	{
		if( el.addEventListener )
		{	
			el.addEventListener('mouseup', onMouseUp, true);
			el.addEventListener('mousemove', onMouseMove, true);
			el.addEventListener('touchstart', onTouchStart, true);
			el.addEventListener('touchmove', onTouchMove, true);
			el.addEventListener('touchend', onTouchEnd, true);			
		}else if( el.attachEvent ) {
                        // make sure mouse events have the prefix <strong>on</strong>
			el.attachEvent('onmouseup',    onMouseUp);		
			el.attachEvent('onmousemove',    onMouseMove);
			el.attachEvent('touchstart',   onTouchStart);
			el.attachEvent('touchmove',    onTouchMove);
			el.attachEvent('touchend', onTouchEnd);				
		}   
	}
}
// also remove the Listeners correctly:
 
function removeListeners( el )
{	var e = el;
	if( !e )  e = document.getElementById('myDiv');
	var el = e;
	if( el )
	{
		if( el.removeEventListener )
		{	
			el.removeEventListener('mouseup', onMouseUp);
			el.removeEventListener('mousemove', onMouseMove);
			el.removeEventListener('touchstart', onTouchStart);
			el.removeEventListener('touchmove', onTouchMove);
			el.removeEventListener('touchend', onTouchEnd);
		}else if( el.detachEvent ) {
			el.detachEvent('onmouseup',    onMouseUp);
			el.detachEvent('onmousemove',    onMouseMove);
			el.detachEvent('touchstart',   onTouchStart);
			el.detachEvent('touchmove',    onTouchMove);
			el.detachEvent('touchend', onTouchEnd);				
		}  
	}
}

Now its just a Matter of Needs, what to do within the handlers:
an Example could be

 function onMouseUp(e) {
	log('-&gt; mouse up');
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	removeListeners();
	stopEvent(e);
}
 
function onMouseDown(e) {
	log('-&gt; mouse down');
	addListeners();
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	onTouchStart(e);
	stopEvent(e);
}
 
function onMouseMove(e) {
	log('-&gt; mouse move');
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	onTouchMove(e);
	stopEvent(e);
}
 
function onTouchStart(e) {
	log('-&gt; touch start');
	//do something with e.touches[0].clientX or e.touches[0].clientY
   stopEvent(e);
}
 
function onTouchMove(e) {
	log('-&gt; touch move');
	//do something with e.touches[0].clientX or e.touches[0].clientY
	stopEvent(e);
}
 
function onTouchEnd(e) {
	log('-&gt; touch end');
	if( !is_touch_device() ) removeListeners();
}

And to not get any errors, add function log and function is_touch_device…

function log(str) {
	var c;
	c = document.getElementById('console');
	c.innerHTML = str + '
' + c.innerHTML;
}
 
function is_touch_device() {
  return !!('ontouchstart' in window) ? 1 : 0;
}

Finally, if it is an Touch device, you want to add the listeners onLoad of the document, on regular devices on MouseDown. Call this function on documen_ready or onLoad.

function init() {
 
	var el;
    el = document.getElementById('myDiv');
 
	if( el.addEventListener )
	{
		el.addEventListener('mousedown', onMouseDown, false);
	}else if( el.attachEvent ) {
		el.attachEvent('onmousedown',    onMouseDown);
	}
	if( is_touch_device() ) addListeners();
 
 
}

it works so far in IE8/9, FireFox 3.6.1+, Safari and mobile Safari ( ios )

2 comments
  1. admin says: 22. Februar 201213:59

    I did have an error within the removeEventListeners

    Make Sure to not have 3 Parameters at el.removeEventListener

    if( el.removeEventListener )
    		{	
    			el.removeEventListener('mouseup', onMouseUp);
    			el.removeEventListener('mousemove', onMouseMove);
    			el.removeEventListener('touchstart', onTouchStart);
    			el.removeEventListener('touchmove', onTouchMove);
    			el.removeEventListener('touchend', onTouchEnd);
    		}else if( el.detachEvent ) {
    			el.detachEvent('onmouseup',    onMouseUp);
    			el.detachEvent('onmousemove',    onMouseMove);
    			el.detachEvent('touchstart',   onTouchStart);
    			el.detachEvent('touchmove',    onTouchMove);
    			el.detachEvent('touchend', onTouchEnd);				
    		}  
    
  2. Cedik says: 10. August 201208:08

    Nice post, thanks! I was doing some IE-fixing and realized I had no idea what its equivalent for removeEventListener was (sounds silly, I know).

    You might want to add ‘touchcancel’ along with ‘touchend’ in your code (more info here: http://alxgbsn.co.uk/2011/12/23/different-ways-to-trigger-touchcancel-in-mobile-browsers/ ). It’s not something that occurs very often, but is is a valid case

Submit comment