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('-> mouse up'); e.touches = [{clientX: e.clientX, clientY: e.clientY}]; removeListeners(); stopEvent(e); } function onMouseDown(e) { log('-> mouse down'); addListeners(); e.touches = [{clientX: e.clientX, clientY: e.clientY}]; onTouchStart(e); stopEvent(e); } function onMouseMove(e) { log('-> mouse move'); e.touches = [{clientX: e.clientX, clientY: e.clientY}]; onTouchMove(e); stopEvent(e); } function onTouchStart(e) { log('-> touch start'); //do something with e.touches[0].clientX or e.touches[0].clientY stopEvent(e); } function onTouchMove(e) { log('-> touch move'); //do something with e.touches[0].clientX or e.touches[0].clientY stopEvent(e); } function onTouchEnd(e) { log('-> 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 )
Read More
