現在、オフライン アプリケーションを開発しており、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) をクリックするたびに新しい最後のノードをすべて削除することです。