mouseover sometimes fires instead of touchstart - why? : <p>I have found a very strange behavior that I cannot explain. Want to do the following:</p>

<p>A handler needs to react to a <code>touchstart</code> <strong>or</strong> <code>mouseover</code> event, depending on the type of input device. Note that I want to support hybrid devices (with both mouse and touchscreen) and I cannot rely on pointer events.</p>

<p>Now, I just setup both <code>touchstart</code> and <code>mouseover</code>events. And for the most part it works just fine. Also use <code>preventDefault</code> to prohibit simulated "mouse" events firing after touch events. But what is totally confusing to me is that <em>sometimes</em> there is a still a <code>mouseover</code> event occuring, and if I remove the preventDefault, it even seems that the <code>mouseover</code>is firing <strong>instead</strong> of a <code>touchstart</code>. Why oh why is this happening?</p>

<p>Furthermore, this is reproducible with both Android and iOS! Though it seems to be more easily triggered with Android (using Chrome).</p>

<p>I have prepared a little testcase so you can try for yourselves. Note that this behavior seems only triggered when you tap somewhere on the border between the red DIV (which has the events) and the background. Just tapping in the center works 100%. And you may need more or less tries until it happens.</p>

<p>Any help greatly appreciated!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Touchtest&lt;/title&gt;
  &lt;style&gt;
    body {
      background: #222;
      color: white;
      position: relative;
      font-size: .9em;
      font-family: Arial, Helvetica, sans-serif;
    }
    #test {
      position: fixed;
      top: 100px;
      right: 100px;
      bottom: 100px;
      left: 100px;
      background: red;
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id="test"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    function testEvent(event) {
      console.log("testEvent", event);
      if (event.type === "mouseover") {
        alert("MOUSEOVER DETECTED");
      }
      event.preventDefault();
    }

    var ele = document.getElementById("test");
    ele.addEventListener("touchstart", testEvent);
    ele.addEventListener("mouseover", testEvent);
  &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>
