We Keep Coding

Make touchcancel event a touchend using HammerJS

I have a webapp running in Google Chrome Browser that runs fine on Windows 7 with a touchscreen, however on a Windows 8 tablet the touch events don't work in the same way.
It is much more sensitive to any movement of the touch which often results in a touchcancel event being fired instead of a touchend.
I'd like to map all touchcancel events to be a touchend. The app uses Hammer JS as I hoped it would cover situations like this. Does anybody have a method to fix this?

Got a much better experience on the events by changing the hammer defaults setting especially around the tap settings to make a larger threshold for a touch tap event which translates through to a touchend.

Using touch events with Createjs / Easeljs

I'm trying to use touch events with Createjs / Easeljs objects. For example, I'm trying to attach a touchstart and touchmove event using addEventListener.
Touchstart and mousedown seems to work: I'm using a browser and a touch device to test it and it seems to work in both cases.
However, mousemove and touchmove doesn't seem to work. I though it was because I removed the stopPropagation and preventDefault methods, but I saw that Lanny McNie wrote that there is no need to do it in CreateJS 1.
I can't figure out why it doesn't work.
This is my code:
http://pastebin.com/pqxWLNKG
Regards.

You can use the Touch class included with EaselJS to enable multi-touch - which translate into normal EaselJS mousedown/mousemove events. Check out the DragAndDrop demo: http://www.createjs.com/demos/easeljs/draganddrop
createjs.Touch.enable(stage);
Cheers.

Cross-platform HTML touchend event handling

In reading about the touchend event, it seem that the behavior is somewhat inconsistent across different devices. I simply want to know the best and simplest way to determine whether all touching has ceased. Do I understand correctly that I can't rely on event.touches being null or empty when this is the case because some devices will include the ended touch in that list? Do I understand correctly that I can't rely on changedTouches being the same length as touches when this is the case because some devices will exclude the ended touch from touches?

For now only OSX (ipad, iphone) support ongesturechange event on their browser. All the other events are supported in all devices, here are some of them and that is the way how to use them. To detect touch end you can use touchend even, it is the same over all devices and it will fires when all fingers are not in touch:
$(someel).bind('touchend',callback');
To detect touch support just use this
var touchy=("ontouchstart" in document.documentElement)?true:false;
Safari developers ipad guide has a good documentation on this.
UPDATE: In fact I was wrong, touchend fires every time a finger lifts up: here is an excellent pdf for you: http://www.albanx.com/programing/ajaxupload/uploaded/SafariJSRef.pdf look at page 21.

Why does Firefox not pass all mouse wheel events to my javascript application?

I'm using the protovis library (http://mbostock.github.com/protovis/) to draw a graph.
I uploaded the code I'm using in case someone wants to take a look at it:
http://jsfiddle.net/zobel/brEAD/
Here is my problem: Under Firefox, when I use the mouse wheel to zoom in or out, some mouse wheel events are not captured by my application but by Firefox itself. The result is that i end up getting a mix of zooms and page scrolls. You can test this by shrinking the Firefox window until the scroll bar gets visible.
This problem does not occur under Opera. Why does it happen and how can I solve it?
Thanks a lot in advance.

May be a bug (or simple omission) in the JavaScript library. The library needs to preventDefault() on the DOMMouseScroll event.
Thanks to event bubbling, you can do this yourself on any DOM object that's a parent node of the graph. Here's one simple example:
document.body.addEventListener('DOMMouseScroll', function(e){
e.preventDefault();
}, false);
This won't work in older versions of IE, since it doesn't support addEventListener, but you get the point. I recommend using another general-purpose JavaScript library (like jQuery), and use that to set your event handler.

How to handle drag events on iphone and ipad with javascript/jquery?

I have a little app that has been under development for some time. My friends and I have been working really hard on this and are near release of the beta version.
I want to give some demos using iPhone and iPad to look cool :p
Now my problem is how to handle:
Mouse Down
Mouse Up
Mouse Leave
The multitouch interface of the iPhone (which I expect is similar to the iPad) handles mouse move on a browser has a scrolling event. One could try to capture the scrolling event and use it to simulate the dragging but I don't even know if it will be doable or if it will only be a hack.
Any one knows of a more robust manner to manage dragging events on the iphone/ipad?

Apple's Developer pages have a lot of good info on handling just these types of issues.
Handling Events

I was having the same problem and I realized that in the short time-span I had, developing codes to handle raw mouse (down, move and up) events would take time. So, I went ahead and modified the ThreeDumsMedia jQuery.event.drag plugin to make it to work on iPhone.
Get the jQuery.event.drag from http://www.shamasis.net/2011/06/javascript-drag-events-on-iphone-and-other-touch-based-devices/ and the 'drag' event would work just fine on iOS devices.
let me know if this helped.

Try this :
jquery.event.drag - v 2.2
Three Dub Media - http://threedubmedia.com

If you are using jQuery, then use jquery.ui.mouse.touch.js with jquery UI 1.9.