Touch events for JavaScript

Question

So I have already tried doing

function isTouchDevice() {
  return 'ontouchstart' in window;
}

    function customBindTest(ele, eventType, callback) {
    if ((eventType === 'click') && isTouchDevice()) {
        eventType = 'touchend';
    }
    var onevent = 'on' + eventType;
      if (ele.attachEvent) { // IE
        ele.attachEvent(onevent, callback);
    } else if (ele.addEventListener) {
        ele.addEventListener(eventType, callback, false);
    } else {
        ele[onevent] = callback;
    }
}

But the problem I now face is that When on a laptop such as Windows 8 with a touch screen and mouse pad. You can't click via the mouse in browsers such as Chrome (Whereas IE10 is fine because it doesn't have the key ontouchstart.

Has anyone got any ideas or come across any similar issues in the past?

The code you provided won't prohibit mouse clicks. You should show the code which deals with a "press" — CodingIntrigue, Dec 09 '13 at 13:06
Well I'm testing to see if it is a touch device and then binding touchend rather than click. — Nick White, Dec 09 '13 at 13:13
when binding both on devices such as iPad, it messes up as an example I have this on a video tag to pause the video. It messes up pauses then plays like firing it twice .... — Nick White, Dec 09 '13 at 13:32

cocco · Answer 1 · 2013-12-09T14:34:15.403

Some time ago i wrote a custom touch/mouse event system witch preserves scrolling and everything else like normal but it adds new events based on he devices.Wich respectively use the mouse to create the swipes & clicks or the touches.it also does all the math outside the mousemove / touchmove to leave this function lagfree.

first i checked which tipe of os i have (in your case you need to change this line to make it work in win8)

(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)?'touch':'mouse')

then i created an array containing the various functions for mouse and touch events ...

it creates 6 new events.

fc: fastclick (especially for ios devices else the click takes 500ms) 50ms

sfc: superfastclick (this is for fixed elements , its basically on touchstart) 0ms

not tu use when you also scroll.

and the various swipes swl,swr,swu,swd (swipeleft,right,up & down)

the mouse reacts like a normal touch event

if you click->hold->move right->release it gives you a swipe right event.

told that in your case you need both.(wich could be a problem... dunno) but you can do that just by deleting this line (also remove the device check mentioned on top)

for(var a in f[m]){d.addEventListener(a,f[m][a],false);}

and replace it with

for(var a in f['mouse']){d.addEventListener(a,f['mouse'][a],false);}
for(var a in f['touch']){d.addEventListener(a,f['touch'][a],false);}

i can't test it on win 8 touch ... try it.

http://jsfiddle.net/3u5pJ/

To test just swipe or click on the result box looking at the console.

ps: As ie 10 is standardized everything should work like in all new modern browsers.this code is not meant to be working on obsolete browsers.

EDIT

this example adds touch events on the mouse and the touches.

http://jsfiddle.net/3u5pJ/1/

To test just swipe or click on the result box looking at the console.

yeah and if you use that code u should not use click events as they are very bad in touch devices , but use the custom fc or sfc.

usage:

element.addEventListener('swl',handlerFunction,false)//swipeleft

if you don't understand something just ask.

Touch events for JavaScript

1 Answers1