I&#39;ve written a jQuery plug-in that&#39;s for use on both desktop and mobile devices. I wondered if there is a way with JavaScript to detect if the device has touch screen capability. I&#39;m using jquery-mobile.js to detect the touch screen events and it works on iOS, Android etc., but I&#39;d also like to write conditional statements based on whether the user&#39;s device has a touch screen.

Is that possible?

What&#39;s the best way to detect a &#39;touch screen&#39; device using JavaScript?

How do I add a touch event to a UIView?  
I try:

    UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, nextY)] autorelease];
    [headerView addTarget:self action:@selector(myEvent:) forControlEvents:UIControlEventTouchDown];
    // ERROR MESSAGE: UIView may not respond to &#39;-addTarget:action:forControlEvents:&#39;

I don&#39;t want to create a subclass and overwrite

    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event


How to add a touch event to a UIView?

I have an activity that is using the Theme.Dialog style such that it is a floating window over another activity. However, when I click outside the dialog window (on the background activity), the dialog closes. How can I stop this behaviour?

Prevent Android activity dialog from closing on outside touch

I am using hammer for dragging and it is getting choppy when loading other stuff, as this warning message is telling me.

&gt; Handling of &#39;touchstart&#39; input event was delayed for X ms due to
&gt; main thread being busy. Consider marking event handler as &#39;passive&#39; to
&gt; make the page more responsive.

So I tried to add &#39;passive&#39; to the listener like so

    Hammer(element[0]).on(&quot;touchstart&quot;, function(ev) {
      // stuff
    }, {
      passive: true
    });

but I&#39;m still getting this warning.

Consider marking event handler as &#39;passive&#39; to make the page more responsive

I want to ignore all `:hover` CSS declarations if a user visits our website via touch device. Because the `:hover` CSS does not make sense, and it can even be disturbing if a tablet triggers it on click/tap because then it might stick until the element loses focus. To be honest, I don&#39;t know why touch devices feel the need to trigger `:hover` in first place - but this is reality, so this problem is reality as well.
```css
a:hover {
  color:blue;
  border-color:green;
  /* etc. &gt; ignore all at once for touch devices */
}
```
**So, (how) can I remove/ignore all CSS `:hover` declarations at once (without having to know each one) for touch devices after having them declared?**


How to remove/ignore :hover css style on touch devices

I&#39;d like to do a simple control: a container with a view inside. If I touch the container and I move the finger, I want to move the view to follow my finger. 

What kind of container (layout) should I use? How to do this?

I don&#39;t need to use a surface, but a simple layout.

android: move a view on touch move (ACTION_MOVE)

While working with browser events, I&#39;ve started incorporating Safari&#39;s touchEvents for mobile devices. I find that `addEventListener`s are stacking up with conditionals. *This project can&#39;t use JQuery.*

A standard event listener:

    /* option 1 */
    window.addEventListener(&#39;mousemove&#39;, this.mouseMoveHandler, false);
    window.addEventListener(&#39;touchmove&#39;, this.mouseMoveHandler, false);

    /* option 2, only enables the required event */
    var isTouchEnabled = window.Touch || false;
    window.addEventListener(isTouchEnabled ? &#39;touchmove&#39; : &#39;mousemove&#39;, this.mouseMoveHandler, false);



JQuery&#39;s `bind` allows multiple events, like so:

    $(window).bind(&#39;mousemove touchmove&#39;, function(e) {
        //do something;
    });

**Is there a way to combine the two event listeners as in the JQuery example?** ex:

    window.addEventListener(&#39;mousemove touchmove&#39;, this.mouseMoveHandler, false);

Any suggestions or tips are appreciated!

Binding multiple events to a listener (without JQuery)?

I have created a carousel with a previous and a next button that are always visible. These buttons have a hover state, they turn blue. On touch devices, like iPad, the hover state is sticky, so the button stays blue after tapping it. I don&#39;t want that.

 - I could add a `no-hover` class `ontouchend` for each button, and make
   my CSS like this: `button:not(.no-hover):hover { background-color:
   blue; }` but that&#39;s probably quite bad for performance, and doesn&#39;t
   handle devices like the Chromebook Pixel (which has both a
   touchscreen and a mouse) correctly.
   
 - I could add a `touch` class to the `documentElement` and make my CSS
   like this: `html:not(.touch) button:hover { background-color: blue;
   }` But that also doesn&#39;t work right on devices with both touch and a
   mouse.

What I would prefer is removing the hover state `ontouchend`. But it doesn&#39;t seem like that is possible. Focusing another element doesn&#39;t remove the hover state. Tapping another element manually does, but I can&#39;t seem to trigger that in JavaScript.

All the solutions I have found seem imperfect. Is there a perfect solution?

How to prevent sticky hover effects for buttons on touch devices

I&#39;m developing a webapp (not a website with pages of interesting text) with a very different interface for touch (your finger hides the screen when you click) and mouse (relies heavily on hover preview).
How can I detect that my user has no mouse to present him the right interface? I plan to leave a switch for people with both mouse and touch (like some notebooks). 

The touch event capability in the browser doesn&#39;t actually mean the user is using a touch device (for example, Modernizr doesn&#39;t cut it).  The code that correctly answers the question should return false if the device has a mouse, true otherwise. For devices with mouse and touch, it should return false (not touch only)

As a side note, my touch interface might also be suitable for keyboard-only devices, so it&#39;s more the lack of mouse I&#39;m looking to detect.

To make the need more clear, here is the API that I&#39;m looking to implement:
    
    // Level 1


    // The current answers provide a way to do that.
    hasTouch();

    // Returns true if a mouse is expected.
    // Note: as explained by the OP, this is not !hasTouch()
    // I don&#39;t think we have this in the answers already, that why I offer a bounty
    hasMouse();

    // Level 2 (I don&#39;t think it&#39;s possible, but maybe I&#39;m wrong, so why not asking)

    // callback is called when the result of &quot;hasTouch()&quot; changes.
    listenHasTouchChanges(callback);

    // callback is called when the result of &quot;hasMouse()&quot; changes.
    listenHasMouseChanges(callback);

Detecting that the browser has no mouse and is touch-only

I have a view overlayed on top of many other views. I am only using the overaly to detect some number of touches on the screen, but other than that I don&#39;t want the view to stop the behavior of other views underneath, which are scrollviews, etc. How can I forward all the touches through this overlay view? It is a subclass of UIView.

iOS - forward all touches through a view

I want to **disable** the **double-tap zoom** functionality **on specified elements** in the browser (on touch devices), **without disabling all the zoom functionality**.

For example: One element can be tapped multiple times for something to happen. This works fine on desktop browsers (as expected), but on touch device browsers, it will zoom in.

Disable double-tap &quot;zoom&quot; option in browser on touch devices

What is the safest way, using media queries, to make something happen when not on a touchscreen device? If there is no way, do you suggest using a JavaScript solution such as `!window.Touch` or Modernizr?

Media query to detect if device is touchscreen

With some HTML like this:

    &lt;p&gt;Some Text&lt;/p&gt;

Then some CSS like this:

    p {
      color:black;
    }

    p:hover {
      color:red;
    }

How can I allow a long touch on a touch enabled device to replicate hover? I can change markup/use JS etc, but can&#39;t think of an easy way to do this.

How do I simulate a hover with a touch in touch enabled browsers?

I am looking for a drag &amp; DROP plugin that works on touch devices.

I would like similar functionality to the [jQuery UI plugin][1] which allows &quot;droppable&quot; elements.


The [jqtouch plugin][2] supports dragging, but no dropping.


[Here][3] is drag &amp; drop that only supports iPhone/iPad.


Can anyone point me in the direction of a drag &amp; drop plugin that works on android/ios? 

...Or it might be possible to update the jqtouch plugin for droppability, it already runs on Andriod and IOS.

Thanks!


  [1]: http://jqueryui.com/demos/droppable/
  [2]: http://www.midemos.com/demos/iphone/touch/?/iphone/touch/
  [3]: http://www.gotproject.com/blog/post2.html

Javascript Drag and drop for touch devices

How do I get the jQuery-UI sortable feature working on iPad and other touch devices?

http://jqueryui.com/demos/sortable/

I tried to using `event.preventDefault();`, `event.cancelBubble=true;`, and `event.stopPropagation();` with the `touchmove` and the `scroll` events, but the result was that the page does not scroll any longer.

Any ideas?

jquery-ui sortable | How to get it work on iPad/touchdevices?

I need to build a project for drawing on canvas by fingers.

How to get the touch event and motion event of my finger and then draw?


Draw in Canvas by finger, Android

I&#39;m writing a Web site that&#39;s meant to be used from both desktops and tablets. When it&#39;s being visited from a desktop, I want the clickable areas of the screen to light up with `:hover` effects (different background color, etc.) With a tablet, there&#39;s no mouse, so I don&#39;t want any hover effects.

The problem is, when I tap something on the tablet, the browser evidently has some kind of &quot;invisible mouse cursor&quot; that it moves to the location I tapped, and then leaves it there -- so the thing I just tapped lights up with a hover effect until I tap something else.

**How can I get the hover effects when I&#39;m using the mouse, but suppress them when I&#39;m using the touchscreen?**

In case someone was thinking of suggesting it, I don&#39;t want to use user-agent sniffing. The same device could have both a touchscreen and a mouse (maybe not so common today, but much more so in the future). I&#39;m not interested in the device, I&#39;m interested in how it&#39;s currently being used: mouse or touchscreen.

I already tried hooking the `touchstart`, `touchmove`, and `touchend` events and calling `preventDefault()` on all of them, which does suppress the &quot;invisible mouse cursor&quot; some of the time; but if I tap rapidly back and forth between two different elements, after a few taps it will start moving the &quot;mouse cursor&quot; and lighting up the hover effects anyway -- it&#39;s like my `preventDefault` isn&#39;t always honored. I won&#39;t bore you with the details unless necessary -- I&#39;m not even sure that&#39;s the right approach to take; if anyone has a simpler fix, I&#39;m all ears.

----

**Edit:** This can be reproduced with bog-standard CSS `:hover`, but here&#39;s a quick repro for reference.

    &lt;style&gt;
      .box { border: 1px solid black; width: 150px; height: 150px; }
      .box:hover { background: blue; }
    &lt;/style&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;

If you mouse over either of the boxes, it will get a blue background, which I want. But if you tap on either of the boxes, it will also get a blue background, which is the thing I&#39;m trying to prevent.

I&#39;ve also posted a sample [here](http://sandbox.excastle.com/stackoverflow/8291517.html) that does the above and also hooks jQuery&#39;s mouse events. You can use it to see that tap events will also fire `mouseenter`, `mousemove` and `mouseleave`.

Disable hover effects on mobile browsers

I have a fixed image that overlays a page when the user is in the act of scrolling a touch screen (mobile).

I want to make that image &quot;unclickable&quot; or &quot;inactive&quot; or whatever, so that if a user touches and drags from that image, the page behind it still scrolls as if the image weren&#39;t there &quot;blocking&quot; the interaction.

Is this possible? If need be, I could try to provide screen shots exemplifying what I mean.

Thanks!

Make element unclickable (click things behind it)

I have already styled and implemented jQuery UI slider into a project. Though it&#39;s responsive, the slider does not respond to being touched and dragged. Instead, you have to touch where you want the slider to go. I&#39;d like to avoid swapping to jQuery mobile UI, which supports touching and dragging, since we already extensively use jQuery (non-mobile) UI.

The functionality we want:
[Here][1]&lt;br/&gt;
What we are using: [Here][2]

On a desktop you can&#39;t tell the difference. On a mobile device it is apparent.

Anyone know how to add this support to jquery UI?

    $(&quot;#videographers&quot;).slider({
      value: 2,
      min: 1,
      max: 3,
      step: 1,
      slide: function(event, ui) {
        return calcTotal(ui.value);
      }
    });


  [1]: http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
  [2]: http://jqueryui.com/slider/#steps

jQuery UI slider Touch &amp; Drag/Drop support on Mobile devices

There is a blue highlight that appears whenever a Div that has the cursor:pointer property applied is touched in Chrome.
How can we get rid of it?

I have tried the following:

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

But they do not affect the blue highlighting on press of a cursor.

Disable Blue Highlight when Touch/Press object with Cursor:Pointer

In android, most event listener methods return a boolean value. What is that true/false value mean ? what will it result in to the subsequence events ?

    class MyTouchListener implements OnTouchListener {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            logView.showEvent(event);
            return true;
        }
    }

Regarding to the above example, if return true in **onTouch** method,I found every touch event(DOWN,UP,MOVE,etc) has been captured according to my **logView**. On the contrary,if return false, onely the DOWN event been captured. So it&#39;s seemd that return false will prevent the event to propagate. Am I correct ?

Furthermore, in a **OnGestureListener**, many methods have to return a boolean value too. Do they have the same meaning ?

What is meaning of boolean value returned from an event-handling method in Android

I&#39;m trying to get the X position with jQuery of a touchstart event, used with the live function?

I.e.

    $(&#39;#box&#39;).live(&#39;touchstart&#39;, function(e) { var xPos = e.PageX; } );

Now, this does work with &#39;click&#39; as the event. How on earth (without using the ***alpha*** jQuery Mobile) do I get it with a touch event?

Any ideas?

Thanks for any help.

Is there an equivalent to e.PageX position for &#39;touchstart&#39; event as there is for click event?

I have a page with a section to sketch a drawing in.  But the touchmove events, at least the vertical ones, are also scrolling the page (which degrades the sketching experience) when using it on a mobile browser.  Is there a way to either a) disable &amp; re-enable the scrolling of the page (so I can turn it off when each line is started, but turn it back on after each is done), or b) disable the default handling of touchmove events (and presumably the scrolling) that go to the canvas the sketch is drawn in (I can&#39;t just disable them completely, as the sketching uses them)?

I&#39;ve used jquery-mobile vmouse handlers for the sketch, if that makes a difference.

**Update**: On an iPhone, if I select the canvas to be sketched in, or just hold my finger for a bit before drawing, the page doesn&#39;t scroll, and not because of anything I coded in the page.

Disable scrolling when touch moving certain element

I&#39;m developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don&#39;t cause any errors, but the behavior is not what it should be. 

The elements in question are sliders and rangesliders as defined by jQuery UI; on the touch screen, instead of registering a touch as picking up a handle and a drag as dragging the handle across the slider, it just slides the whole webpage to the side of the screen. It does work if you tap the handle and then tap the location on the slider where you want the handle to end up, but this is very slow and not ideal. Any ideas?

I tried downloading the jqtouch plugin and then attaching `.touch([...])` to all calls to slider() and rangeslider(), but that didn&#39;t work.

UPDATE: I found this &quot;patch&quot; on the jQuery UI website

http://bugs.jqueryui.com/ticket/4143

that says it facilitates slider on iPhone, but now for another question: how do I incorporate this &quot;patch&quot; into my code? Do I just include it at the beginning of the code like a plugin?

jQuery UI sliders on touch devices

I want to have a view in which there are vehicles driving around that the user can also drag and drop. What do you think is the best large-scale strategy for doing this? Is it best to get touch events from the views representing the vehicles, or from the larger view? Is there a simple paradigm you&#39;ve used for drag and drop that you&#39;re satisfied with? What are the drawbacks of different strategies?

Basic Drag and Drop in iOS

I&#39;ve read that [ mobile Safari has a 300ms delay on click events][1] from the time the link/button is clicked to the time the event fires. The reason for the delay is to wait to see if the user intends to double-click, but from a UX perspective waiting 300ms is often undesirable.

[One solution][2] to eliminate this 300ms delay is to use jQuery Mobile &quot;tap&quot; handling. Unfortunately I&#39;m not familiar with this framework and don&#39;t want to load some big framework if all I need is a line or two of code applying `touchend` in the right way.



Like many sites, my site has many click events like this: 

    $(&quot;button.submitBtn&quot;).on(&#39;click&#39;, function (e) {   
      $.ajaxSubmit({... //ajax form submisssion
    });

    $(&quot;a.ajax&quot;).on(&#39;click&#39;, function (e) {   
      $.ajax({... //ajax page loading
    });

    $(&quot;button.modal&quot;).on(&#39;click&#39;, function (e) {   
          //show/hide modal dialog
    });
    

and what I&#39;d like to do is to get rid of the 300ms delay on **ALL** those click events using a single code snippet like this:

    $(&quot;a, button&quot;).on(&#39;tap&#39;, function (e) {
     $(this).trigger(&#39;click&#39;);
     e.preventDefault();
    });

Is that a bad/good idea? 


  [1]: https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE.
  [2]: http://www.mikedellanoce.com/2012/09/10-tips-for-getting-that-native-ios.html

Eliminate 300ms delay on click events in mobile Safari

I&#39;m trying to make some of my libraries work with touch devices, but I&#39;m having a hard time trying to figure out how they&#39;re supported and how they work.

Basically, there are [5 touch events][1], but it seems there&#39;s consensus among mobile browsers only on the `touchstart` event (duh). I&#39;ve created a [fiddle][2] as a test case.

I&#39;ve tested this on my Galaxy Note with Android 4 on board, but you can check the link with a desktop browser too.

The goal is to try to figure out how to handle taps, double taps and long taps. Nothing fancy.

Basically, this is what happens:

The **Android stock browser** doesn&#39;t fire touch events. It just tries to emulate mouse clicks with taps, firing `mousedown`, `mouseup` and `click` events consecutively, but double taps just zoom in and out tha page.

**Chrome** for Android fires the touchstart event when the finger touches the screen. If it&#39;s released soon enough, it fires then `mousedown`, `mouseup`, `touchend` and finally `click` events.

In case of *long tap*, after about half a second it fires `mousedown` and `mouseup`, and `touchend` when the finger is lifted, with no `click` event at the end.

If you *move your finger*, it fires a `touchmove` event a couple of times, then it fires a `touchcancel` event, and nothing happens afterwards, not even a `touchend` event when lifting the finger.

A *double tap* triggers the zoom in/out features, but event-wise it fires the combo `touchstart`-`touchevent` twice, with no mouse events fired.

**Firefox** for Android correctly fires the `touchstart` event, and in case of short tap fires `mousedown`, `mouseup`, `touchend` and `click` afterwards.

In case of *long tap*, it fires `mousedown`, `mouseup` and finally `touchend` events. It&#39;s the same of Chrome for these things.

But if you *move your finger*, if fires `touchmove` continously (as one may expect) but it doesn *not* fire the `touchleave` event when the finger leaves the element with the event listener, and doesn&#39;t fire the `touchcancel` event when the finger gets out of the browser viewport.

For *double taps*, it behaves just like Chrome.

**Opera Mobile** does the same thing of Chrome and Firefox for a short tap, but in case of long press activates some sort of sharing feature that I really want to disable. If you move your finger, or double tap, it behaves just like Firefox.

**Chrome beta** does the usual for short taps, but in case of long taps it doesn&#39;t fire the `mouseup` event anymore, just `touchstart`, then `mousedown` after half a second, then `touchend` when the finger is lifted. When the finger is moved, now it behaves like Firefox and Opera Mobile.

In case of *double taps*, it doesn&#39;t fire touch events *when zooming out*, but only when zooming in.

Chrome beta shows the oddest behaviour, but I can&#39;t really complain since it&#39;s a beta.

**The question is**: is there a simple and way to try to detect short taps, long taps and double taps in the most common browsers of touch devices?

Too bad I can&#39;t test it on iOS devices with Safari, or IE for Windows Phone 7/Phone 8/RT, but if some of you can, your feedback would be very appreciated.


  [1]: https://developer.mozilla.org/en-US/docs/DOM/Touch_events
  [2]: http://jsfiddle.net/cpUsA/4/

Understanding touch events

I can&#39;t find an example on how to intercept the map touch on the new Google Maps API v2.

I need to know when the user touches the map in order to stop a thread (the centering of the map around my current location).


Google Maps Android API v2 - detect touch on map

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&#39;s awesome developer mode.

What I would like is to be able to debug my Html/JavaScript using Google-Chrome&#39;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?


Simulating touch events on a PC browser

http://marakana.com/tutorials/android/2d-graphics-example.html

I am using this example below. But when I move my fingers too fast across the screen the line turns to individual dots.

I am not sure whether I can speed up the drawing. Or I should connect the two last points with a straight line. The second of these two solutions seems like a good option, except when moving your finger very fast you will have long sections of a straight line then sharp curves.

If there are any other solutions it would be great to hear them.

Thanks for any help in advance.

Android How to draw a smooth line following your finger

Let&#39;s say I am listening for `touchstart`, `touchmove` and `touchend` on the `body` element.

Let me know if I&#39;m wrong, but I think `e.touches` is the same as `e.targetTouches`? If so, how `e.changedTouches` varies in relation with them? 

I mean, given one touch at one given moment, I fetch the touchevent and parse it. In my experience all three touch variables are the same. 

I have to send the parsed data to the server and it&#39;s quite redundant to send three times the same exact string, isn&#39;t there any way to send them once and programatically reproduce the touchevent on the server?

Variation of e.touches, e.targetTouches and e.changedTouches

I&#39;m currently fiddling around with Android programming, but I have a small problem detecting different touch events, namely a normal touch press (press on the screen and release right away), a long press (touch the screen and hold the finger on it) and movement (dragging on the screen).

What I wanted to do is have an image (of a circle) on my screen which I can drag around. Then when I press it once (short/normal press) a Toast comes up with some basic information about it. When I long press it, an AlertDialog with a list comes up to select a different image (circle, rectangle or triangle).

I made a custom View with my own OnTouchListener to detect the events and draw the image in onDraw. The OnTouchListener.onTouch goes something like this:

    // has a touch press started?
    private boolean touchStarted = false;
    // co-ordinates of image
    private int x, y;
    
    public boolean onTouch(View v, MotionEvent event) {
    	int action = event.getAction();
    	if (action == MotionEvent.ACTION_DOWN) {
    		touchStarted = true;
    	}
    	else if (action == MotionEvent.ACTION_MOVE) {
    		// movement: cancel the touch press
    		touchStarted = false;
    		
    		x = event.getX();
    		y = event.getY();
    		
    		invalidate(); // request draw
    	}
    	else if (action == MotionEvent.ACTION_UP) {
    		if (touchStarted) {
    			// touch press complete, show toast
    			Toast.makeText(v.getContext(), &quot;Coords: &quot; + x + &quot;, &quot; + y, 1000).show();
    		}
    	}
    	
    	return true;
    }

The problem is that the press doesn&#39;t quite work as expected, because when I casually touch the screen it also detects a tiny bit of movement and cancels the touch press and moves around the image instead.

I &quot;hacked&quot; around this a bit my introducing a new variable &quot;mTouchDelay&quot; which I set to 0 on ACTION_DOWN, increase in MOVE and if it&#39;s &gt;= 3 in MOVE I execute my &quot;move&quot; code. But I have a feeling this isn&#39;t really the way to go.

I also haven&#39;t found out how to detect a long press. The culprit really is the MOVE which seems to always trigger.

For an example of what I roughly want, see the Android application &quot;DailyStrip&quot;: it shows an image of a comic strip. You can drag it if it&#39;s too large for the screen. You can tap it once for some controls to pop-up and long press it for an options menu.

PS. I&#39;m trying to get it to work on Android 1.5, since my phone only runs on 1.5.

Detect touch press vs long press vs movement?

On a touch device like iPhone/iPad/Android it can be difficult to hit a small button with your finger. There is no cross-browser way to detect touch devices with CSS media queries that I know of. So I check if the browser has support for Javascript touch events. &lt;strike&gt;Until now, other browsers haven&#39;t supported them, but the latest Google Chrome on dev channel [enabled touch events][1] (even for non touch devices). And I suspect other browser makers will follow, since laptops with touch screens are coming&lt;/strike&gt;. &lt;strong&gt;Update: It was a bug in Chrome, so now the JavaScript detection works again&lt;/strong&gt;.

This is the test I use:

    function isTouchDevice() {
        return &quot;ontouchstart&quot; in window;
    }

The problem is that this only tests if the browser has support for touch events, not the device.

Does anyone know of The Correct[tm] way of giving touch devices better user experience? Other than sniffing user agent.

Mozilla has a media query for touch devices. But I haven&#39;t seen anything like it in any other browser:
https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

Update: I want to avoid using a separate page/site for mobile/touch devices. The solution has to detect touch devices with object detection or similar from JavaScript, or include a custom touch-CSS without user agent sniffing! **The main reason I asked, was to make sure it&#39;s not possible today, before I contact the css3 working group**. So please don&#39;t answer if you can&#39;t follow the requirements in the question ;)


  [1]: http://code.google.com/p/chromium/issues/detail?id=36415
  [2]: http://modernizr.github.com/Modernizr/touch.html

How to optimize website for touch devices

I&#39;m messing around with touch events on a touch slider and I keep getting the following error: 

&gt; Ignored attempt to cancel a touchmove event with cancelable=false,
&gt; for example because scrolling is in progress and cannot be
&gt; interrupted.

I&#39;m not sure what is causing this problem, I am new to working with touch events and can&#39;t seem to fix this problem.

Here is the code handling the touch event:

    Slider.prototype.isSwipe = function(threshold) {
        return Math.abs(deltaX) &gt; Math.max(threshold, Math.abs(deltaY));
    }
    
    
    Slider.prototype.touchStart = function(e) {
    		
        if (this._isSliding) return false;
        
    	  touchMoving = true;
    	  deltaX = deltaY = 0;
    		
        if (e.originalEvent.touches.length === 1) {
          
            startX = e.originalEvent.touches[0].pageX;
            startY = e.originalEvent.touches[0].pageY;
    
            this._$slider.on(&#39;touchmove touchcancel&#39;, this.touchMove.bind(this)).one(&#39;touchend&#39;, this.touchEnd.bind(this));
    
            isFlick = true;
    
            window.setTimeout(function() {
                isFlick = false;
            }, flickTimeout);
        }
    }
    
    
    Slider.prototype.touchMove = function(e) {
    		
        deltaX = startX - e.originalEvent.touches[0].pageX;
        deltaY = startY - e.originalEvent.touches[0].pageY;
    
        if(this.isSwipe(swipeThreshold)) {
            e.preventDefault();
            e.stopPropagation();
            swiping = true;
        }
        if(swiping) {
            this.slide(deltaX / this._sliderWidth, true)
        }
    }
    
    
    Slider.prototype.touchEnd = function(e) {
    		
        var threshold = isFlick ? swipeThreshold : this._sliderWidth / 2;
    
        if (this.isSwipe(threshold)) {
            deltaX &lt; 0 ? this.prev() : this.next();
        }
        else {
            this.slide(0, !deltaX);
        }
    
        swiping = false;
    
        this._$slider.off(&#39;touchmove&#39;, this.touchMove).one(transitionend, $.proxy(function() {
            this.slide(0, true);
            touchMoving = false;
        }, this));
    }

You can find the actual slider **[here at this pen][1]**.

If you swipe through fast enough it will throw the error and sometimes get stuck in the middle of a swipe. Still can&#39;t wrap my head around why it is not working. Any help/insight would be greatly appreciated. Not sure what I am doing wrong.


  [1]: http://codepen.io/ftntravis/pen/raEuH

Touch move getting stuck Ignored attempt to cancel a touchmove

Tooltips are an incredibly useful interface paradigm to know an application. They are the mapping between the visual control and the application specific action associated to that control. The user can explore the action without invoking it just by hovering the mouse pointer.

The touch devices make this paradigm basically impossible. This limits the usability of the app, which becomes in some cases pretty mysterious. 

Do you know if a substitute for the tooltip concept exists for touch devices? They effectively lack one degree of freedom in ui interaction: the pointer position. How to regain this communication channel effectively?

Tooltips in the era of touch

I&#39;m wondering how apps like SwipePad and Wave Launcher are able to detect touch gestures/events simply through a service. These apps are able to detect a touch gestures even though it is not in their own Activity. I&#39;ve looked all over the Internet and haven&#39;t found how they can do that. 

My main question is how a service can listen in on touch guestures/events just as a regular Activity may receive MotionEvents even though it may not be in the original Activity or context. I&#39;m essentially trying a build an app that will recongize a particular touch gesture from a user regardless which Activity is on top and do something when that gesture is recongized. The touch recongition will be a thread running in the background as a service.

How can a service listen for touch gestures/events?

I am trying to detect if my sprite node has been touched and I have no idea where to start.

    let Pineapple = SKSpriteNode(imageNamed: &quot;Pineappleimg&quot;)
    Pineapple.userInteractionEnabled = true
    Pineapple.position = CGPoint(x: CGRectGetMidX(self.frame) - 200, y: CGRectGetMidY(self.frame));
    self.addChild(Pineapple)

How do I detect if an SKSpriteNode has been touched

I want to change modification timestamp of a binary file. What is the best way for doing this?

Would opening and closing the file be a good option? (I require a solution where the modification of the timestamp will be changed on every platform and JVM).


Simulate touch command with Java

I&#39;ve got a view and I applied a UIPanGestureRecogniser to this view:

    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAnim:)];
    [sliderView addGestureRecognizer:panGesture];
    [panGesture release];

I can detect and process the gesture just fine. However, I wish to initiate another method once the gesture has ended.

I know there are two methods that allow this kind of detection. `touchesEnded` and `touchesCancelled` however, I&#39;ve found that `touchesCancelled` gets called as soon as the touch becomes a gesture i.e. I move my finger enough to warrant a gesture call and `touchesEnded` rarely, if ever, gets called.

I want to be able to pan left / right and then initiate another function call upon gesture ending. How do I do this?

Detecting Pan Gesture End

I am working on an iphone (iOS 4.0 or later) app and having some troubles with touch handling between multiple views. I am having a view structure like this

    ---&gt; A superView 
         |
         ---&gt; SubView - A 
         |
         ---&gt; SubView - B (exactly on top of A, completely blocking A).

 
  

 ![enter image description here][1]

  
 Basically I have a superView, and sibling subviews A and B. B has the same frame as A, hence hiding A completely. 

 Now my requirement is this. 
  

 1. **SubView B should receive all swipe and tap (single and double)
    gestures.**
 2. **SubView A should receive all pinch gestures.**

This is how I added gesture recognizers to the views

    UISwipeGestureRecognizer *leftSwipe  =  [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];
    [leftSwipe setDirection:(UISwipeGestureRecognizerDirectionLeft)];
    leftSwipe.delegate  =   self;
    [bView addGestureRecognizer:leftSwipe];
    [leftSwipe release];
        
    UISwipeGestureRecognizer *rightSwipe  =  [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];
    [rightSwipe setDirection:(UISwipeGestureRecognizerDirectionRight)];
    rightSwipe.delegate   =   self;
    [bView addGestureRecognizer:rightSwipe];
    [rightSwipe release];
        
    UIPinchGestureRecognizer *pinch   =  [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(handlePinch:)];
    pinch.delegate    =   self;
    [aView addGestureRecognizer:pinch];
    [pinch release];


I did some research and to me `UIGestureRecognizerDelegate` looked promising and I implemented the delegate method

    - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer

I returned NO for SubView B, hoping that underlying view will get these event. No such luck though

    - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
        if ([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]] &amp;&amp; [gestureRecognizer view] == bView) {
            NSLog(@&quot;pinchGesture&quot;);
            //bView.userInteractionEnabled = NO;
            return NO;
        }
        return YES;
    }
Then I disabled user interaction of SubView B inside the delegate callback (commented code in above block), when pinch gesture is recognized, hoping remaining part of gesture will be received by SubView A. No such luck there too.. 

So that is where I stand now. I have seen [this][2] question, where the accepted answer involves property `cancelsTouchesInView`. But I believe `cancelsTouchesInView` only cancel a particular touch event, do not forward it. 

Any other way to achieve my requirement? I am ready to work on whatever hint you provide.

&lt;h2&gt;EDIT : BOUNTY TIME&lt;/h2&gt;

My so called subView A is actually an instance of a 3rd party library&#39;s View class, which takes all touches away and I don&#39;t have any control over any gestures on it. I want different implementation for left and right swipe and I want pinch, tap etc work just like it is working with this third party view. So I put a view on top of A (SubView B) to get left and right swipes. But now I want to forward other gesture events to underlying library.

  [1]: http://i.stack.imgur.com/zBkpS.png
  [2]: https://stackoverflow.com/questions/6175255/uigesturerecognizer-receive-touch-but-forward-it-to-uicontrol-as-well

Forwarding UIGesture to views behind

I would like to trigger a touch event like this:

First the finger is touch down at the (0,50%) of the screen and slide to the (50%,50%) of the screen, and exit (move the finger off the screen)

I have found some thing like this:

    MotionEvent event = MotionEvent.obtain(downTime, eventTime, action, x, y, pressure, size, metaState, xPrecision, yPrecision, deviceId, edgeFlags);
    
    onTouchEvent(event);

However, how to emulate the above case? Do I need to create 2 event ? onTouchDown , onMove etc.... ? Thanks for helping.

How to programmatically trigger the touch event in android?

I am working on some javascript UI, and using a lot of touch events like &#39;touchend&#39; for improved response on touch devices. However, there are some logical issues which are bugging me ...

I have seen that many developers mingle &#39;touchend&#39; and &#39;click&#39; in the same event. In many cases it will not hurt, but essentially the function would fire twice on touch devices:

    button.on(&#39;click touchend&#39;, function(event) {
      // this fires twice on touch devices
    });

It has been suggested that one could detect touch capability, and set the event appropriately for example:

    var myEvent = (&#39;ontouchstart&#39; in document.documentElement) ? &#39;touchend&#39; : &#39;click&#39;;
    button.on(myEvent, function(event) {
      // this fires only once regardless of device
    });

The problem with the above, is that it will break on devices that support both touch and mouse. If the user is currently using mouse on a dual-input device, the &#39;click&#39; will not fire because only &#39;touchend&#39; is assigned to the button.

Another solution is to detect the device (e.g. &quot;iOS&quot;) and assign an event based on that:
https://stackoverflow.com/questions/8503453/click-event-called-twice-on-touchend-in-ipad.
Of course, the solution in the link above is only for iOS (not Android or other devices), and seems more like a &quot;hack&quot; to solve something quite elementary.

Another solution would be to detect mouse-motion, and combine it with touch-capability to figure out if the user is on mouse or touch. Problem of course being that the user might not be moving the mouse from when you want to detect it ...

The most reliable solution I can think of, is to use a simple [debounce][1] function to simply make sure the function only triggers once within a short interval (for example 100ms):

    button.on(&#39;click touchend&#39;, $.debounce(100, function(event) {
      // this fires only once on all devices
    }));

Am I missing something, or does anyone have any better suggestions?

*Edit:* I found this link after my post, which suggests a similar solution as the above:
https://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both

  [1]: http://benalman.com/projects/jquery-throttle-debounce-plugin/

JavaScript touchend versus click dilemma

I&#39;d like to provide separate behaviour for browsers supporting hover (e.g. desktop browsers) and ones which don&#39;t (e.g. touchscreen devices). Specifically I want to declare a hover state on browsers that support it, but not for browsers that don&#39;t, so as to avoid having mobile browsers emulate it with extra taps, as this breaks other interactions on the page - by not defining a hover state for those browsers this is avoided.

I&#39;ve read up on the [Interaction Media Queries](https://drafts.csswg.org/mediaqueries-4/#hover) feature and it looks like it should do the trick. I&#39;d be able to do something like:

    @media (hover: none) {
      /* behaviour for touch browsers */
    }

According to [CanIUse](http://caniuse.com/#feat=css-media-interaction) it is available on all the browsers I need to support except IE11 and Firefox.

So I wondered if I could do it the other way around - since the main touch devices all support it, then negate it:

    @media not (hover: none) {
      /* behaviour for desktop browsers */
    }

However, this doesn&#39;t seem to work at all.

Pseudocode example of what I&#39;m trying to do:

    .myelement {
      /* some styling */
      /* note: no hover state here */
    }
    @media(this device supports hover) {
      .myelement:hover {
        /* more styling */
      }
    }

So, is there a way to make this work in the way intended, or am I down the wrong track?

Media query for devices supporting hover

If I catch all touchend events from mobile devices with:

    $(document.body).bind(&#39;touchend&#39;, function (e) {
    var touch = e.touches[0]; // doesnt work
    ...

I need to get the touch.screenX, touch.screenY, touch.clientX and touch.clientX from the e paramter. All the examples I&#39;ve seen suggest that e.touches will be a collection, and you can get at the touch details with `e.touches[0]`. In my tests on an ipad, `e.touches` is always undefined. I&#39;m not using any jquery plugins.

Also tried e.targetTouches, which is also undefined.

Can anyone help?

touchend event properties

I have an activity with a Dialog theme and I would like to close (finish) this activity when someone touches the screen anywhere outside this activity&#39;s window ? How can I do this ?

All Touch Solutions on Gang of Coders

Total of 45 Touch Solutions