Develop Reference

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.

Touch API (e.g. touchstart) not working in MS Edge

my application is using the Touch API to detect touch events in JavaScript. Example:
$(".element").on("touchstart", function(event){
alert("TRUE");
});
This works on any touch device with any browser like Android or iOS, however it doesn't work in MS Edge on a Windows 10 Tablet with or without conntected keyboard. The API seems to be supported: Compatibility list. However, I've tested: 'ontouchstart' in window and this returns false on this device. Furthermore mousedown seems to get fired.
What is going on here? What can I do to fire touch events on a Windows 10 tablet?
I would like to keep the event only for touch devices. Switching to the Pointer Events API would include also Desktop devices and that is not what I want.

for touch API, you have to activate a flag on Edge : in the address bar, enter about:flags and press enter. In the section Touch, you can enable touch events with the corresponding dropdown

Did you enable custom touch handling ? You can do it with the following css snippet (on the body tag or just a container for geastures) :
-ms-touch-action: none;
Next, touch API is a webkit feature (maybe there is an error in CanIuse ?). IE and Edge have a similar feature known as Pointer API. But you can use a polyfill library like this :
https://github.com/CamHenlin/TouchPolyfill

Try using the pointerdown event. Some (much) more information. As you can see, touchstart is triggered by Edge but not in all configurations, when a keyboard is attached/paired for example, no touchstart.

Swipe gesture from inside html page not working in UIWebView

I have a UIWebView which loads an html page that supports swipe left/right gesture to switch between content. This gesture works well when the page is opened from a desktop browser but doesn't work at all when loaded from a UIWebView.
jQuery Swipe
FOR IPHONE & IPOD TOUCH MOBILE APPS
iPhone and iPod Touch swipe gesture support using Safari JavaScript for onTouchStart, onTouchMove, onTouchEnd and onTouchCancel.
This plugin uses Mobile Safari's built in touch events to allow jQuery binding of swipe events to any DOM element. You can override the swipeLeft and swipeRight defaults functions to create your own custom process when the gesture is detected.
This is the plugin used for swiping: http://archive.plugins.jquery.com/project/swipe
Did anyone else had this issue?
Any help would be much appreciated!

//For Left Swipe
UISwipeGestureRecognizer * swipeleft=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:#selector(swipeleft)];
swipeleft.direction=UISwipeGestureRecognizerDirectionLeft;
[self.view addGestureRecognizer:swipeleft];
//For Right Swipe
UISwipeGestureRecognizer * swiperight=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:#selector(swiperight)];
swiperight.direction=UISwipeGestureRecognizerDirectionRight;
[self.view addGestureRecognizer:swiperight];
Methods
-(void)swipeleft{
}
-(void)swiperight{
}
Try this one..

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.