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;
} |
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);
}
}
} |
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();
} |
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;
} |
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();
} |
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