Android jsPlumb touch事件在web浏览器上工作，但在平板电脑浏览器上不工作

我使用jsplumb匹配了columns模板，我在其中使用了拖放功能。在web浏览器上一切都正常。但当我在平板电脑浏览器上运行同样的程序时，它就不起作用了。我阅读了他们建议使用touchpunch的论坛。我也用过。但当我点击圆圈与另一列相匹配时，它不会移动。请指出错误在哪里。 我使用的代码段是：

main.js

function display()
{                
    var questiontxt = xmlDoc.getElementsByTagName("questionTxt")[0].childNodes[0].nodeValue;

    $("#topmain").html(questiontxt);

    fitemid= x[0].getElementsByTagName("item").length;
    ftargetid= x[0].getElementsByTagName("target").length;
    $("#listitem").append('<table cellspacing="5" cellpadding="8" style="width: 95%; " id="list"></table>');
    connections = [];

    jsPlumb.importDefaults({
        ConnectionsDetachable:true,
        ReattachConnections:true
    });

    updateConnections = function(conn, remove) {
        connections.push(conn);
        hideConnectionInfo(connections[0].sourceId);
    };

    window.jsPlumbDemo = {
        init : function() {
            var exampleDropOptions = {
                tolerance:"touch",
                hoverClass:"dropHover",
                activeClass:"dragActive"
            };

            var color2 = "#FFF";
            var color3 = "#09F";
            var exampleEndpoint2 = {
                tolerance:"touch",
                hoverClass:"dropHover",
                activeClass:"dragActive",
                endpoint:["Dot", { radius:15 }],
                paintStyle:{ fillStyle:color3 },
                isSource:true,
                scope:"green dot",
                connectorStyle:{ strokeStyle:color3, lineWidth:2 },
                maxConnections:1,
                connector: "Straight",
                isTarget:false
            };

            var exampleEndpoint3 = {
                endpoint:["Dot", { radius:15}],
                paintStyle:{ fillStyle:color3 },
                isSource:false,
                scope:"green dot",
                connectorStyle:{ strokeStyle:color3, lineWidth:2 },
                maxConnections:1,
                connector: "Straight",
                isTarget:true,
                beforeDrop:function(params) { 
                    var v=(params.sourceId).substring(6,(params.sourceId).length);
                    var w=(params.targetId).substring(12,(params.targetId).length);

                    if(v == w){
                        document.getElementById('ans'+w).innerHTML+="<img src='img/correct.png'>";
                        count++;
                        c = xmlDoc.getElementsByTagName("item").length;

                        if(count == c){
                            feedback();
                            alert(window.parent)
                            window.parent.updateResult(100)
                        }
                        return confirm(); 
                        dropOptions : exampleDropOptions    

                    }
                }
            };

            jsPlumb.bind("connection", function(info, originalEvent) {
                updateConnections(info.connection);
            });

            jsPlumb.bind("connectionDetached", function(info, originalEvent) {
                updateConnections(info.connection, true);
            });

            function Shuffle(o) {
                for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
                    return o;
                };

            var testArray = new Array();
            var testArray1 = new Array();

            for(i=0 ; i< fitemid ;i++){
                testArray.push(i);
            }
            Shuffle(testArray);

            for(i=0 ; i< fitemid ;i++){
                testArray1.push(i);
            }
            Shuffle(testArray1);

            for(i=0 ; i< fitemid ;i++)
            {
                fitem[i] = x[0].getElementsByTagName("item")[testArray1[i]].childNodes[0].nodeValue;
                ftarget[i] = x[0].getElementsByTagName("target")[testArray[i]].childNodes[0].nodeValue;

                j = x[0].getElementsByTagName("item")[testArray1[i]].getAttribute("target");
                l = x[0].getElementsByTagName("target")[testArray[i]].getAttribute("id");

                $("#list").append("<tr style='width:100%;'><td id=\"circle"+j+"\" class='circle ,\"circle"+j+"\' style='width:65%; vertical-align: top; border:1px #999 solid; float:left; border-radius:4px;'>"+fitem[i]+"</td> <td id=\"circletarget"+l+"\" class='circletarget,\"circle"+j+"\' style='vertical-align: top; width:59%; border:1px #999 solid; border-radius:4px;'>"+ftarget[i]+"</td><td class='circletarget,\"circle"+j+"\' style='vertical-align: top; width:5%;'><div id=\"ans"+l+"\" class='ans'></td></tr>");

                var e1 = jsPlumb.addEndpoint("circle"+j, { anchor:[1, 0.5, 1, 1 ] }, exampleEndpoint2);
                var e2 = jsPlumb.addEndpoint("circletarget"+l, { anchor:[ 0, 0.5, 1, 1 ] }, exampleEndpoint3);

                jsPlumb.draggable($("#circle"+j,"#circletarget"+l));
            }   
        }       
    };  
    jsPlumbDemo.init(); 
} 

函数显示（）
{                
var questiontxt=xmlDoc.getElementsByTagName（“questiontxt”）[0]。子节点[0]。节点值；
$（“#topmain”）.html（questiontxt）；
fitemid=x[0]。getElementsByTagName（“项”）。长度；
ftargetid=x[0].getElementsByTagName（“目标”）.length；
$（“#列表项”）。附加（“”）；
连接=[]；
jsPlumb.importDefaults({
ConnectionsDetaccable:true，
重新连接：true
});
updateConnections=函数（连接，删除）{
连接。推动（连接）；
hideConnectionInfo（连接[0].sourceId）；
};
window.jsdemo={
init:function（）{
var exampleDropOptions={
宽容：“触摸”，
hoverClass:“dropHover”，
activeClass:“dragActive”
};
var color2=“#FFF”；
var color3=“#09F”；
变量exampleEndpoint2={
宽容：“触摸”，
hoverClass:“dropHover”，
activeClass:“dragActive”，
端点：[“点”{radius:15}]，
paintStyle:{fillStyle:color3}，
来源：是的，
经营范围：“绿点”，
连接器样式：{strokeStyle:color3，线宽：2}，
maxConnections:1，
连接器：“直”，
isTarget:错误
};
变量exampleEndpoint3={
端点：[“点”{radius:15}]，
paintStyle:{fillStyle:color3}，
来源：错，
经营范围：“绿点”，
连接器样式：{strokeStyle:color3，线宽：2}，
maxConnections:1，
连接器：“直”，
isTarget:没错，
beforeDrop:函数（参数）{
var v=（params.sourceId）.substring（6，（params.sourceId）.length）；
var w=（params.targetId）.substring（12，（params.targetId）.length）；
如果（v==w）{
document.getElementById（'ans'+w）.innerHTML+=“”；
计数++；
c=xmlDoc.getElementsByTagName（“项”）.length；
如果（计数=c）{
反馈（）；
警报（window.parent）
window.parent.updateResult（100）
}
返回确认（）；
dropOptions:exampleDropOptions
}
}
};
jsPlumb.bind（“连接”，函数（info，originalEvent）{
更新连接（信息连接）；
});
jsPlumb.bind（“connectionAttached”，函数（info，originalEvent）{
updateConnections（info.connection，true）；
});
函数洗牌（o）{
对于（var j，x，i=o.length；i；j=parseInt（Math.random（）*i），x=o[--i]，o[i]=o[j]，o[j]=x）；
返回o；
};
var testArray=新数组（）；
var testArray1=新数组（）；
对于（i=0；i

index.html

<html>
<head>
<script src="js/lib/jquery.min.js"></script>

        <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
                 <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script>
        <script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script>

        <script src="js/lib/jquery.ui.touch-punch.js" ></script>

        <script src="js/lib/jsBezier-0.5.js"></script>      
        <!-- jsplumb util -->
        <script src="js/1.4.0/jsPlumb-util-1.4.0-RC1.js"></script>
        <!-- base DOM adapter -->
        <script src="js/1.4.0/jsPlumb-dom-adapter-1.4.0-RC1.js"></script>
        <!-- jsplumb drag-->
        <!--<script src="js/1.4.0/jsPlumb-drag-1.4.0-RC1.js"></script>-->
        <!-- main jsplumb engine -->
        <script src="js/1.4.0/jsPlumb-1.4.0-RC1.js"></script>
        <!-- connectors, endpoint and overlays  -->
        <script src="js/1.4.0/jsPlumb-defaults-1.4.0-RC1.js"></script>
        <!-- SVG renderer -->
        <script src="js/1.4.0/jsPlumb-renderers-svg-1.4.0-RC1.js"></script>
        <!-- canvas renderer -->
        <script src="js/1.4.0/jsPlumb-renderers-canvas-1.4.0-RC1.js"></script>
        <!-- vml renderer -->
        <script src="js/1.4.0/jsPlumb-renderers-vml-1.4.0-RC1.js"></script>

        <!-- jquery jsPlumb adapter -->
        <script src="js/1.4.0/jquery.jsPlumb-1.4.0-RC1.js"></script>

</head>

    <body>

 <div id="content" class="content">         

                <div id="topmain"></div>
                <div id="listitem"></div>
            </div>

 </body>

    <script src="js/main.js"></script>



</html>

---

jsplump创建了一个SVG，它可以停留在连接的元素上，防止点击触发SVG下元素上的事件

您可以通过在jsPlumb创建的所有SVG上附加一个click事件来测试它，并检查您的click触发该事件

对我来说，解决方案是将SVG下元素的z索引更改为大于jsPlumb实例中设置的z索引的z索引

顺便说一句，您可以通过以下方式控制连接器的z索引：

jsPlumb.importDefaults（{ConnectorZIndex:number}）//数字是z索引