title: How to identify if a mouseover event object came from a touchscreen touch?
body: <p>On virtually all current browsers  (extensive <a href="https://patrickhlauke.github.io/touch/tests/results/" rel="noreferrer">details from patrickhlauke on github</a>, which <a href="https://stackoverflow.com/a/39477086/568458">I summarised in an SO answer</a>, and also some more info <a href="http://www.quirksmode.org/mobile/tableTouch.html" rel="noreferrer">from QuirksMode</a>), touchscreen touches trigger <code>mouseover</code> events (sometimes creating an invisible pseudo-cursor that stays where the user touched until they touch elsewhere).</p>
  
  <p>Sometimes this causes undesirable behaviour in cases where touch/click and mouseover are intended to do different things. </p>
  
  <p>From inside a function responding to a mouseover event, that has been passed the <code>event</code> object, is there any way I can check if this was a "real" mouseover from a moving cursor that moved from outside an element to inside it, or if it was caused by this touchscreen behaviour from a touchscreen touch?</p>
  
  <p>The <code>event</code> object looks identical. For example, on chrome, a mouseover event caused by a user touching a touchscreen has <code>type: "mouseover"</code> and nothing I can see that would identify it as touch related.</p>
  
  <p>I had the idea of binding an event to <code>touchstart</code> that alters mouseover events then an event to <code>touchend</code> that removes this alteration. Unfortunately, this doesn't work, because the event order appears to be <code>touchstart</code> &rarr; <code>touchend</code> &rarr; <code>mouseover</code> &rarr; <code>click</code> (I can't attach the normalise-mouseover function to click without messing up other functionality).</p>
  
  <hr>
  
  <p>I'd expected this question to have been asked before but existing questions don't quite cut it:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/27059800/how-to-handle-mouseover-and-mouseleave-events-in-windows-8-1-touchscreen">How to handle mouseover and mouseleave events in Windows 8.1 Touchscreen</a> is about C# / ASP.Net applications on Windows, not web pages in a browser</li>
  <li><a href="https://stackoverflow.com/questions/37403733/jquery-onclick-triggers-mouseover-on-touch-device">JQuery .on(“click”) triggers “mouseover” on touch device</a> is similar but is about jQuery and the answer is a bad approach (guessing a hard-coded list of touchscreen user agents, which would break when new device UAs are created, and which falsely assumes all devices are mouse <em>or</em> touchscreen)</li>
  <li><a href="https://stackoverflow.com/questions/28665855/preventing-touch-from-generating-mouseover-and-mousemove-events-in-android-brows">Preventing touch from generating mouseOver and mouseMove events in Android browser</a> is the closest I could find, but it is only about Android, is about preventing not identifying mouseover on touch, and has no answer</li>
  <li><a href="https://stackoverflow.com/questions/36446539/browser-handling-mouseover-event-for-touch-devices-causes-wrong-click-event-to-f">Browser handling mouseover event for touch devices causes wrong click event to fire</a> is related, but they're trying to elumate the iOS two-tap interaction pattern, and also the only answer makes that mistake of assuming that touches and mouse/clicks are mutually exclusive.</li>
  </ul>
  
  <p>The best I can think of is to have a touch event that sets some globally accessible variable flag like, say, <code>window.touchedRecently = true;</code> on <code>touchstart</code> but not click, then removes this flag after, say, a 500ms <code>setTimeout</code>. This is an ugly hack though.</p>
  
  <hr>
  
  <p>Note - we <em>cannot</em> assume that touchscreen devices have no mouse-like roving cursor or visa versa, because there are many devices that use a touchscreen and mouse-like pen that moves a cursor while hovering near the screen, or that use a touchscreen and a mouse (e.g. touchscreen laptops). More details in my answer to <a href="https://stackoverflow.com/a/39474891/568458">How do I detect whether a browser supports mouseover events?</a>.</p>
  
  <p>Note #2 - this is <em>not</em> a jQuery question, my events are coming from Raphael.js paths for which jQuery isn't an option and which give a plain vanilla browser <code>event</code> object. If there is a Raphael-specific solution I'd accept that, but it's very unlikely and a raw-javascript solution would be better.</p>