Menu
Problem
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.
Desired Behaviour
I need to detect which element is underneath a users finger after touch move (After touchstart but before touchend).
What actually happens on mobile
What I want to happen on mobile
What I've tried
$('polygon').mouseover(function() {
$(this).css({color:"red"});
})polygon {
fill: currentColor;
}
polygon:hover {
color: red;
}
svg {
width:100vw;
height:100vh;
touch-action:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>SVG Test</title>
</head>
<body>
<svg id="s" version="1.1" width="100vw" height="100vh" xmlns="http://www.w3.org/2000/svg">
<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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon><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;"></polygon>
</svg>
</body>
</html>
312
This solution works for me with jQuery version 2.x and with including jQuery mobile.
JSFiddle: https://jsfiddle.net/1423g4o3/
HTML
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<svg id="s" version="1.1" width="100vw" height="100vh" xmlns="http://www.w3.org/2000/svg">
<!-- Your polygons here -->
</svg>
</body>
CSS
polygon {
color: #333;
}
polygon:hover {
color: red;
}
svg {
width: 100vw;
height: 100vh;
touch-action: none;
}
jQuery
$(document).on("pagecreate", "body", function() {
$("polygon")
.on("touchmove", function(e) {
var xPos = e.originalEvent.touches[0].pageX;
var yPos = e.originalEvent.touches[0].pageY;
$(document.elementFromPoint(xPos, yPos)).css('color', 'red');
}).end()
.on("touchend", function() {
$("polygon").css('color', '#333'); // Reset color when let go
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
