— 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 )

6 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

  3. […] Internet Explorer 8 and all the fun stuff: e … – 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…. […]

  4. […] IE8沒有此方法,需要額外使用以下方法完成, 詳細參考:Internet Explorer 8 and all the fun stuff: e.stopPropagation, e.preventDefault, mousedown…. […]

  5. Maxx says: 28. April 201606:06

    What timing are these functions invoked_?

    • admin says: 2. Mai 201609:06

      you can call addListeners() function, whenever you set the point of readyness of your document.
      Mostly you should wait for the call till the elements are in DOM, and should be removed, when those elements leave the DOM.
      Is that, what you have been asking for?

Submit comment