Question

问题

Mobile仅在触摸开始时触发鼠标悬停事件，我需要在移动设备上复制用户拖动的所有元素的桌面鼠标悬停事件。

所需行为

我需要在触摸移动后检测用户手指下面的哪个元素（触摸后但在触摸前）。

What actually happens on mobile

What I want to happen on mobile

我尝试了什么

＆＃13;

$('polygon').mouseover(function() {
    $(this).css({color:"red"});
})

＆＃13;

polygon {
    fill: currentColor;
}

polygon:hover {
    color: red;
}

svg {
    width:100vw;
    height:100vh;
    touch-action:none;
}

＆＃13;

<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>

＆＃13;

Answer 1

此解决方案适用于jQuery版本2.x以及包含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
        });
});

如何检测当前触摸移动下面的元素

1 个答案: