How do you detect which element is underneath current touch move
<p><strong>Problem</strong></p>

<p>Mobile only fires a mouseover event on touch start, I need to replicate the desktop mouseover event on mobile for all the elements that a user drags over. </p>

<p><strong>Desired Behaviour</strong></p>

<p>I need to  detect which element is underneath a users finger after touch move (After touchstart but before touchend).</p>

<p><a href="http://i.stack.imgur.com/foaro.gif" rel="nofollow">What actually happens on mobile</a></p>

<p><a href="http://i.stack.imgur.com/SnzDb.gif" rel="nofollow">What I want to happen on mobile</a></p>

<p>What I've tried</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-js lang-js prettyprint-override"><code>$('polygon').mouseover(function() {
    $(this).css({color:"red"});
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>polygon {
    fill: currentColor;
}

polygon:hover {
    color: red;
}

svg {
    width:100vw;
    height:100vh;
    touch-action:none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;SVG Test&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;svg id="s" version="1.1" width="100vw" height="100vh" xmlns="http://www.w3.org/2000/svg"&gt;
        &lt;polygon points="40,90 83.30127018922192,65 83.30127018922194,15.00000000000001 40.00000000000001,-10 -3.301270189221917,14.999999999999979 -3.3012701892219525,64.99999999999997 39.99999999999994,90" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="83.30127018922192,165 126.60254037844385,140 126.60254037844386,90.00000000000001 83.30127018922192,65 40.00000000000001,89.99999999999997 39.99999999999997,139.99999999999997 83.30127018922187,165" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="40,240 83.30127018922192,215 83.30127018922194,165 40.00000000000001,140 -3.301270189221917,164.99999999999997 -3.3012701892219525,214.99999999999997 39.99999999999994,240" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="83.30127018922192,315 126.60254037844385,290 126.60254037844386,240 83.30127018922192,215 40.00000000000001,239.99999999999997 39.99999999999997,289.99999999999994 83.30127018922187,315" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="126.60254037844386,90 169.9038105676658,65 169.9038105676658,15.00000000000001 126.60254037844386,-10 83.30127018922195,14.999999999999979 83.30127018922191,64.99999999999997 126.6025403784438,90" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="169.9038105676658,165 213.20508075688772,140 213.20508075688775,90.00000000000001 169.9038105676658,65 126.60254037844388,89.99999999999997 126.60254037844385,139.99999999999997 169.90381056766574,165" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="126.60254037844386,240 169.9038105676658,215 169.9038105676658,165 126.60254037844386,140 83.30127018922195,164.99999999999997 83.30127018922191,214.99999999999997 126.6025403784438,240" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="169.9038105676658,315 213.20508075688772,290 213.20508075688775,240 169.9038105676658,215 126.60254037844388,239.99999999999997 126.60254037844385,289.99999999999994 169.90381056766574,315" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="213.20508075688772,90 256.50635094610965,65 256.50635094610965,15.00000000000001 213.20508075688772,-10 169.9038105676658,14.999999999999979 169.90381056766577,64.99999999999997 213.20508075688767,90" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="256.50635094610965,165 299.8076211353316,140 299.8076211353316,90.00000000000001 256.50635094610965,65 213.20508075688772,89.99999999999997 213.2050807568877,139.99999999999997 256.5063509461096,165" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="213.20508075688772,240 256.50635094610965,215 256.50635094610965,165 213.20508075688772,140 169.9038105676658,164.99999999999997 169.90381056766577,214.99999999999997 213.20508075688767,240" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="256.50635094610965,315 299.8076211353316,290 299.8076211353316,240 256.50635094610965,215 213.20508075688772,239.99999999999997 213.2050807568877,289.99999999999994 256.5063509461096,315" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="299.8076211353316,90 343.10889132455355,65 343.10889132455355,15.00000000000001 299.8076211353316,-10 256.5063509461097,14.999999999999979 256.50635094610965,64.99999999999997 299.80762113533154,90" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="343.10889132455355,165 386.4101615137755,140 386.4101615137755,90.00000000000001 343.10889132455355,65 299.80762113533166,89.99999999999997 299.8076211353316,139.99999999999997 343.1088913245535,165" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="299.8076211353316,240 343.10889132455355,215 343.10889132455355,165 299.8076211353316,140 256.5063509461097,164.99999999999997 256.50635094610965,214.99999999999997 299.80762113533154,240" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;&lt;polygon points="343.10889132455355,315 386.4101615137755,290 386.4101615137755,240 343.10889132455355,215 299.80762113533166,239.99999999999997 299.8076211353316,289.99999999999994 343.1088913245535,315" style="fill: currentcolor; stroke: black; stroke-width: 4px;"&gt;&lt;/polygon&gt;
    &lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>