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.
Related
I've got an library that allows drawing on a canvas. Currently, it supports mouse and touch events. I'd like to add support for pointer events as well.
I'm handling pointerdown, pointermove and pointerup events on the canvas element. Everything works fine in Chrome on my laptop when I use mouse. However, when I try it out on my tablet, I'm only getting a few pointermove events (2-5) before getting pointercancel event followed by pointerout and pointerleave.
I guess the browser is triggering pointercancel, because moving my finger over the canvas triggers scrolling of the whole page as well.
To disable scrolling when using touch events, I'm calling event.preventDefault() in handlers for touchstart and touchmove events, but this solution doesn't seem to be working with pointer events.
How to disable scrolling of the whole page when I draw over the canvas element when using pointer events?
Have you tried the CSS property touch-action: none? It disables any kind of user-agent behavior (like scrolling) on an element.
For more fine grained options checkout the MDN article for touch-action.
I am in the middle of developing an html5 game. I have been using the mousedown and mouseup event handlers for touch events. I have recently been trying to migrate it to a phone emulator to see how it preforms on a device. I was wondering if I needed to rewrite all of my events that use mousedown and up to touchstart and touchend ect. events. The mousedown and mouseup listeners seem to be working fine while I play my game while the "Emulate touch screen" setting is on. In terms of performance is there a reason to use one over the other?
Yes, you should change to touch events. Although the mouse events also work on mobile browser, there is a well-known 300ms click delay on mobile device. Considering that you are developing HTML5 game, it's worthy for you to improve the performance.
There are some third party library such as jQuery Mobile which may help you to mask the event for easier development.
I have been looking for examples for using D3 on a mobile device with touch events instead of mouse events, but am struggling to find anything that maps what touch event replaces which mouse event for example, a click or dblclick. Thus, I have struggled to get started on "converting" my D3 visualizations to support touch.
I need appropriate touch events for:
Zooming (or will it work for both?):
var zoomed = d3.behavior.zoom().x(x).y(y).scaleExtent([scaleExtentMin, scaleExtentMax]).on("zoom", partitionZoom);
click
dblclick
So the main conversion I would need is click --> supported touch event.
How can I do this with D3? Or is there an alternative library that would work well with D3 that can handle the touch events?
Any help with this would be appreciated!
what ever event is supported by html containers is supported by svg. click and tap events are the same except for the 300ms delay. you can use hammer like previously suggested or just jquery mobile
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.
I know how to use the obtouchstart ontouchmove etc. events. But IE10 supports it in a different way. Are there any tutorial about it?
And how can I test it without a touchscreen win8?
Here's a tutorial about Pointer events which seems to normalize all kinds of pointers (touch, pen, mouse)
http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx