I am working on a mobile app and have got lots of touch events on various elements. Unfortunately I cannot test my app on my pc browser as it does not support touchevents. Is there any way I can change all touch events to click events dynamically if I am running on a pc ( ofcourse by checking the useragent ) ?
Thanking you
You can emulate touch events in the chrome web developer tools:
Chrome Developer Tools support touch emulation. But it's not that comfort to use. So I just made a chrome extension for touch event emulation. It translate mousedown, mousemove, mouseup events to touchstart, touchmove, touchend. It actually simulate iphone5, so user agent also changed.
https://chrome.google.com/webstore/detail/touchphone-simulator/jijkpkhmnpbecppjhicgegndbbgfnngf
Related
I'm working on a painting application with multitouch.
This should work on a 32" inch Intellitouch 2521". Unfortunately as expected it is not plug and play together with the Fabric.js which used event.js to catch the touch event.
If i write simple js with touchstart, touchstart and touchmove events these do work with multi touch. But if I try the event.js pinch, touch,... these do not.
Any Idea what could be the reason for this? I already wrote the whole application in expectation that it would just work as it would on a phone (On Mobile the touch functions does work). But with Windows it does not.
I fixed this by using android on desktop for my installation.
I have to trigger some methods specifically on the start of touch event in Firefox Windows touch screen (desktop). I have noticed that due to this bug (please vote up) touch events are disabled by default in Firefox (desktop).
However, not even "mousedown" is triggered when you physically put your finger on the screen and hold it.
I know that you can enable touch events in
config:about
but I can't consider that as a solution as you cannot switch that on programmatically.
The sequence of events should be as follows (that's what it is in e.g. Chrome):
touchstart > [touchmove]+ > touchend > delay > mousemove > mousedown > mouseup > click
see this doc for more details
However, due to the bug mentioned above and the fact that we are dealing with touch devices the actual sequence is the following:
mousemove > mousedown > mouseup > click
Testbed - to show all of the events triggered
So as a result there is NO event triggered on the start of the screen touch?
My question, and a solution to the issue I face is - is it possible to listen to any events in Firefox (desktop) that are triggered as is "touchstart" in e.g. Chrome?
I've asked the question in bugzilla and got some help. See this issue.
It appears that updating Firefox to 42.0a2 (aurora update channel Firefox Developer Edition) solves the issue. Both pointer events and touch events work great.
So far I haven't found a solution for earlier versions of Firefox.
Building a site with jQuery and jGestures and have noticed some devices such as iPads won't respond to the on 'click' event instead they respond to 'tapone'.
I replaced all instances of 'click' with 'tapone' and after testing in various browsers I have noticed no issues. Browsers include the latest versions of IE, Firefox, Chrome for Windows and Safari on Ipad 4.
What are the drawbacks to replacing all instances of: on('click', .... with: on('tapone', ...
Will this cause issues with any desktop browsers?
click is the native browser event.
tapone is a custom event triggered by the jGestures library to capture a one-finger tap. (It also has taptwo etc for multi-touch taps.)
If you are using the library, use its events. Seems like it normalizes to click on non-touch browsers which is why you don't see any issues.
From the documentation:
On every native touchstart, touchend, gesturestart and gestureend-event, jgestures triggers a corresponding custom event (jGestures.touchstart,jGestures.touchend,jGestures.gesturestart and jGestures.gestureend) on the event-element.
How to test touch events without having any touch based screen / device?
I have Windows 7 PC and my monitor is not touch based.
You can use google chrome. Open console by pressing F12 or inspect any element, in right-bottom corner click on gear icon, then go to "overrides" where you can enable "Emulate touch events". Your mouse clicks will be like touches.
Notice: unbind/remove any pc's click events like onclick,onmousedown,.click and .ect because in this mode will works both of touch and click events.
If it's still actual, you can use this library to test touch events. It's used to test touch for Hammer.
One possible way is to install the Android SDK and use the browser in the emulator. I'd advise an Android 2.x image as emulation is a bit slow, especially the 3.x and 4.0 images.
Hammer.js library can simulate touch events on desktop devices.
http://eightmedia.github.com/hammer.js/
I'm building a touchscreen kiosk using Chrome (7.0.536.2 dev) in kiosk
mode on a Windows 7 PC with multi-touch display.
I can see that the ontouchstart event is available (by inspecting the
window object in Webkit Web Inspector) but it never fires. If I write
the following code, the onclick event fires when I touch the screen
but the ontouchstart event doesn't.
window.onclick = function() { alert("click"); }
window.ontouchstart = function() { alert("touchstart"); }
In Firefox 4 the MozTouchDown event fires without any problems.
Are these events not yet available to JavaScript?
I experienced this when developing an iPad webapp and tried to test it in Chrome. It turned out, that Chrome recognizes those events, but does not fire them at the moment. This is a bit frustrating, since it breaks support detection in JavaScript.
There is a command-line switch to enable touch events, change your shortcut adding "chrome.exe --enable-touch". Unfortunately, if ('ontouchstart' in window) returns true then, event is never fired. Just tested this on a Windows7 touch-enabled tablet on canary channel. Disappointing... !
as of chrome 20, you can enable touch events from the "about://flags" internal experiments webpage
I did notice that this breaks fastClick, if you're using that - I was :)