1

現在、オフライン アプリケーションを開発しており、Interactive svg を使用しています。私の問題は、クリックイベントでsvg行の最後のノードを削除することです..ケースは...（最初のクリック）で機能し、最後のノードを削除します。しかし、もう一度試してみると..（2回目のクリック）もう機能しません。問題が見つからないようです。

これは、SVG線分を作成するための私のコードです..

var glblLineNode;
var tempX=[], tempY=[], tempLine=[];

function drawRoad()
{   
       var path = glblGeogSorc.getElementsByTagName("path")
       for (var loop=0; loop<Slct.length; loop++)
       {
         path[loop].addEventListener("mousedown", function(e)
         {
            if(e.button == 0 &&  glblenblroad === true)
            {

                var mousex = e.clientX - matrixE;
                var mousey = e.clientY - matrixF;

                tempX.push(mousex), tempY.push(mousey);

                if(tempX.length > 1)
                {

                    var road = document.createElementNS("http://www.w3.org/2000/svg", "line");                          
                        road.x1.baseVal.value = tempX[tempX.length -1];
                        road.y1.baseVal.value = tempY[tempY.length -1];
                        road.x2.baseVal.value = tempX[tempX.length -2];
                        road.y2.baseVal.value = tempY[tempY.length -2];
                        road.setAttributeNS(null, "stroke", "#686968");
                        road.setAttributeNS(null, "stroke-width", "14.520");
                        road.setAttributeNS(null, "stroke-linecap", "round");
                        road.setAttributeNS(null, "fill", "none");
                        glblGeogSorc.getElementsByTagName("g")[0].appendChild(road);

                        tempLine.push(road);
                        glblLineNode = road;

                }

            }
        },false);

    }

}

関数 drawRoad() が実行されたと仮定しましょう。次に、関数 drawRoad() から作成された svg 行の lastnode を削除するコードを次に示します。

delLastNode.addEventListener("click", function()   //  delLastNode is a var for my button
{

   glblGeogSorc.parentNode.removeChild(glblLineNode);  //glblLineNode is global var prior to the line created
   tempLine.pop();                                    //as well as tempLine[]
   tempX.pop();                                       
   tempY.pop();                                       

},false);

delLastNode(Button) の最初のクリックでは機能しますが、もう一度クリックしようとすると機能しなくなります。私の目標は、delLastNode(Button) をクリックするたびに新しい最後のノードをすべて削除することです。

4

1 に答える 1

0

glblLineNodeループごとに上書きされるため、最後の変数への参照のみを保持します (ループが終了するため)。要素を削除すると、その参照が壊れます。これが、一度しか機能しない理由です。

関数は次のようになります。

delLastNode.addEventListener("click", function()   //  delLastNode is a var for my button
{
   // .pop() returns the removed element, so let's store it. 
   var deleteElem = tempLine.pop(); 
   glblGeogSorc.parentNode.removeChild(deleteElem);
   tempX.pop();                                       
   tempY.pop();                                       
},false);

グローバル変数は必要ありません。

于 2012-09-09T20:44:29.010 に答える