Simulating touch events on a PC browser - javascript

I am developing an HTML application for the iPad. As such it utilizes touch events and webkit-CSS animations.
Up until now I have used chrome as my debugging environment because of it's awesome developer mode.
What I would like is to be able to debug my Html/JavaScript using Google-Chrome's debugger on my PC while simulating touch events with my mouse.
My site does not have any multi-touch events and no mouse events (no mouse on iPad).
I am not actually interested in seeing the applications layout, but more in debugging its behavior.
Is there some plugin to get mouse events translated into touch events on a desktop browser?

As of April 13th 2012
In Google Chrome developer and canary builds there is now a checkbox for "Emulate touch events"
You can find it by opening the F12 developer tools and clicking on the gear at the bottom right of the screen.
For now (Chrome ver.36.0.1985.125) you can find it here: F12 => Esc => Emulation.

The desktop browser can simulate touch events by importing additional JS + CSS.
Take a look at:
addTouch
Phantom Limb

Another way to simulate multi touch on a desktop browser is the Touch Emulator of Hammer.js

We use this script: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
It will allow all mouse events in your application to be triggered by touch events instead. So, since we already had a web application that used right-clicking, drag-n-drop etc. it allowed us to perform all of the same functionality with touch.
I know it's almost the reverse of the simulation you were looking for (you will have to script your application to primarily be used by a mouse) but I hope it helps anyway.

If you're targeting Webkit specifically (iPad and all), you can rely on normal event handler code (add/removeEventListener). With that in mind, you probably need to just branch on a few events - e.g, 'ontouchstart' becomes 'onclick' based on the environment.
Offhand I don't know of any libraries providing this level of branching, though. Pretty easy to do yourself.

Related

Why is the onauxclick event triggered in a different way in google chrome browser?

So i developed a web app and i used onauxclick on a functionality. When i went to test it on firefox browser it all went perfectly. I tested it with google chrome browser and the onauxclick event handler wasn't working when pressing down the mouse wheel. After few more testing i was able to make it work by selecting the text and pressing the right mouse button (without leaving the selected text). So i was wondering, how does it work differently on google chrome browser and windows 10?
While the different browser vendors try to stay as close as possible to the W3C standards when implement HTML and JavaScript features, they do tend to sometimes introduce minor differences between implementations or even not implement some stuff at all.
The feature you are trying to use is at the moment experimental and not supported on Safari and Safari iOS. Expect it to change a bit until it is finalised and released.
More details here:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick

How to trigger MacBook trackpad haptic feedback on a website?

I'm writing a web application with a lot of drag and drop functionality and I want to enable haptic feedback (when possible, using macOS 10.11+ with a Force Touch trackpad) for actions like "snapping in" while dragging items.
Is this possible (I know it's impossible to support every platform, but at least when hardware supports it)? I've tried navigator.vibrate with different time values/patterns but it doesn't seem to do anything even if it returns true.
Should work with the Force Touch events, one of which is webkitmouseforcedown
someElement.addEventListener("webkitmouseforcedown", myFunction, false);
You can read more about this and the other events here
Please note that this will work only on Safari unfortunately

Comment box in qTip disappears onfocus for IE/Edge browser with touch devices

I am making use of an external JavaScript library qTip. My application has a feature of 'StarRating' and 'Comments', which is provided through this plugin.
After providing a rating through the stars, one can enter the Comments(optional), which opens up in a dialog.
This scenario works well across all the major browsers i.e. Chrome FF and IE but not in IE (touch devices) and Edge browser (touch devices). As soon as the stars are clicked and on focus inside the input box, the dialog box disappears in the touch devices with IE and Edge only, but works well in Chrome and FF (touch enabled).
I don't know whether there is an issue with the library or with the touch events.
Microsoft Edge doesn't support touch events by default. It has an alternative system called pointer events. Sometimes 3rd party libs implement touch based widgets that don't play well with pointers. A quick way to determine if this is the case is to switch on touch events inside of Edge. Put about:flags in the address bar then go to the setting enable touch event and change it to always.
If the site now works, then I suspect it's an issue with the library. If that is the issue then I'd raise the issue with qTip they can probably help identify the issue specifically so that it can be fixed in the library.

Simulating touchstart and touchend events?

I'm developing a jquery component which works primarily for ipad. So is there anyway to simulate 'touchstart and 'touchend' events in desktop rather than having the device itself to check the events.
You can author your own custom events within jQuery:
var event = $.Event( "touchstart", { pageX:200, pageY:200 } );
And you can issue them against any element in the DOM:
$("body").trigger( event );
Demo: http://jsbin.com/ezoxed/edit#javascript,html
Further reading: http://api.jquery.com/category/events/event-object/
Keep in mind that there are various other types of interfaces on the market now that don't support touchstart and touchend events. For instance, Windows 8 is already occupying tablets in the mobile market, and it uses a more abstracted event model consisting of Pointers.
Chrome Dev-tools within a Chrome Browser allows you to emulate touch events. See https://developers.google.com/chrome-developer-tools/docs/mobile-emulation.
From the docs...
Emulating Touch Events
Touch is an input method that's difficult to test on the desktop,
since most desktops don't have touch input. Having to test on mobile
can lengthen your development cycle, since every change you make needs
to be pushed out to a server and then loaded on the device.
A solution to this problem is to simulate touch events on your
development machine. For single-touches, the Chrome DevTools supports
single touch event emulation to make it easier to debug mobile
applications on the desktop.
To use from a Chrome browser (as of version 29.0.1547.65):
Select the Chrome menu at the top-right of your browser window (three stacked lines).
Select Tools > Developer tools. (Shortcut Shift+Control+I)
A tools window will appear on the bottom with the tab Console selected.
In the bottom right click on the settings cog (look like a gear).
A setting panel will appear with "General" on top.
Click "Overrides" on left to select overrides panel.
Scroll down and check "Enable touch events"
Reload your page
You mouse will now appear as a fuzzy circle. Click to "touch".
As of 2018, Chrome DevTools supports device emulation outright, without any need for override setting. Just toggle the device toolbar (Ctrl + Shift + M) to get the browser into mobile mode, then touch events can be triggered by the mouse.

Windows touch events in web page

I'm trying to figure out how to add event listeners for windows touch events (like a big touch screen monitor, not mobile) in Windows 7 and can't seem to make things like touchstart touchend etc. trigger in any browser. Do these events just not fire in a browser like they do on an iPad?
As far as I know, those events are included only in some mobile navigators (not all, see http://www.quirksmode.org/mobile/tableTouch.html ). I don't think you can handle them on a standard browser like ff/ie/chrome. You'll have to use mousedown & cie.
Take a look at the v2 branch of hammer.js http://eightmedia.github.com/hammer.js/v2/, it's a nice touch event abstraction layer for iOS, Android, BlackBerry and also includes support for Windows touch events.

Categories

Resources