我用insertAdjacentHTML动态插入元素，入了一个按扭，然后我有时候删除动态插入的元素，我用的这个方法不行，还请高手赐教。
我用insertAdjacentHTML在id为"sspp"的元素里面动态加div，div的id是自动增长的，这个insertAdjacentHTML是在页面onload之后，我点击触发。但是我想删除它同时不影响其它元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
</head><body id="body"><form action="">
<input type="button" onClick="add1()" name="add" value="+">
<input type="button" onClick="cut1()" name="cut" value="-">
<input type="button" onClick="del1()" name="cut" value="清除">
<input type="button" onClick="line1()" name="cut" value="斜线1">
<input type="button" onClick="line2()" name="cut" value="斜线2">
<input type="button" onClick="poly()" name="cut" value="多边形">
</form>
<style>
#sspp{width:100%;height:80%;background-color:#eeeeee}
#idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px;margin:50px;}
#idHandle0{cursor:move; overflow:hidden;}
#idHandle1{cursor:move; overflow:hidden;}
#idHandle2{cursor:move; overflow:hidden;}
#idHandle3{cursor:move; overflow:hidden;}
#idHandle4{cursor:move; overflow:hidden;}
#idHandle5{cursor:move; overflow:hidden;}
#idHandle6{cursor:move; overflow:hidden;}
#idHandle7{cursor:move; overflow:hidden;}
#idHandle8{cursor:move; overflow:hidden;}
#idHandle9{cursor:move; overflow:hidden;}
#idHandle10{cursor:move; overflow:hidden;}
#idHandle11{cursor:move; overflow:hidden;}
</style> <div id="sspp" >
<img id="img" src="1.jpg" onclick="catchMouse()" ></img>
</div> <script type="text/javascript">
var l1 = 0;//是否画线1的标识
var l2 = 0;//是否画线1的标识
var nl1 = 0;//画线1的点有几个
var nl2 = 0;//画线1的点有几个
var ox = 0;
var oy = 0;
var w=3;
var h=3;
var idn = 0;
var id1n = 0;
var id2n = 0;
// 你所点的相对位置数组，是点数组
var pointX = new Array();
var pointY = new Array();
// 你画直线1所点的相对位置数组，是点数组
var l1X = new Array();
var l1Y = new Array();
// 你画直线2所点的相对位置数组，是点数组
var l2X = new Array();
var l2Y = new Array();
// 你所点过的鼠标位置的数组，是点数组
var pointX1 = new Array();
var pointY1 = new Array();
//保存坐标相对误差
var offsetX = 0;
var offsetY = 0;
// 记录鼠标按下点的位置 ，默认是(0,0)
var x=0;
var y=0;
var pointnum=0;
var flag1="0";//保存上一次哪个点被拖动
var flag2="0";//保存上一次哪个点被拖动
var flag3="0";//保存上一次哪个点被拖动
var flag4="0";//保存上一次哪个点被拖动
var isIE = (document.all) ? true : false;
Array.prototype.contains = function (element) {
for (var i = 0; i < this.length; i++) {
if (this[i] == element) {
return true;
}
}
return false;
}
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
var BindAsEventListener = function(object, fun) {
return function(event) {
return fun.call(object, (event || window.event));
}
}
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
//拖放程序
var Drag = Class.create();
Drag.prototype = {
//拖放对象
initialize: function(drag, options) {
this.Drag = $(drag);//拖放对象
this._x = this._y = 0;//记录鼠标相对拖放对象的位置
this._marginLeft = this._marginTop = 0;//记录margin
//事件对象(用于绑定移除事件)
this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);
this.SetOptions(options);
this.Limit = !!this.options.Limit;
this.mxLeft = parseInt(this.options.mxLeft);
this.mxRight = parseInt(this.options.mxRight);
this.mxTop = parseInt(this.options.mxTop);
this.mxBottom = parseInt(this.options.mxBottom);
this.LockX = !!this.options.LockX;
this.LockY = !!this.options.LockY;
this.Lock = !!this.options.Lock;
this.onStart = this.options.onStart;
this.onMove = this.options.onMove;
this.onStop = this.options.onStop;
this._Handle = $(this.options.Handle) || this.Drag;
this._mxContainer = $(this.options.mxContainer) || null;
this.Drag.style.position = "absolute";
//透明
if(isIE && !!this.options.Transparent){
//填充拖放对象
with(this._Handle.appendChild(document.createElement("div")).style){
width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";
}
}
addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Handle: "",//设置触发对象（不设置则使用拖放对象）
Limit: false,//是否设置范围限制(为true时下面参数有用,可以是负数)
mxLeft: 0,//左边限制
mxRight: 9999,//右边限制
mxTop: 0,//上边限制
mxBottom: 9999,//下边限制
mxContainer: "",//指定限制在容器内
LockX: false,//是否锁定水平方向拖放
LockY: false,//是否锁定垂直方向拖放
Lock: false,//是否锁定
Transparent: false,//是否透明
onStart: function(){},//开始移动时执行
onMove: function(){},//移动时执行
onStop: function(){}//结束移动时执行
};
Extend(this.options, options || {});
},
//准备拖动
Start: function(oEvent) {
if(this.Lock){ return; }
if(this.Limit){
//修正错误范围参数
this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
//如果有容器必须设置position为relative来相对定位，并在获取offset之前设置
//!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
}
//记录鼠标相对拖放对象的位置
this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;
//记录margin
this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
//mousemove时移动 mouseup时停止
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
if(isIE){
//焦点丢失
addEventHandler(this._Handle, "losecapture", this._fS);
//设置鼠标捕获
this._Handle.setCapture();
}else{
//焦点丢失
addEventHandler(window, "blur", this._fS);
//阻止默认动作
oEvent.preventDefault();
};
//附加程序
this.onStart();
},
//拖动
Move: function(oEvent) {
//判断是否锁定
if(this.Lock){ this.Stop(); return; };
//清除选择
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//设置移动参数
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
//设置范围限制
if(this.Limit){
//设置范围参数
var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
//如果设置了容器，再修正范围参数
if(!!this._mxContainer){
mxLeft = Math.max(mxLeft, 0);
mxTop = Math.max(mxTop, 0);
mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
};
//修正移动参数
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
}
//设置位置，并修正margin
if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }
if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }
//附加程序
this.onMove();
//var str = "0123456789";//alert(str.substring(0));
//var str = this.Drag.id.toString();
//alert(this.Drag.id.toString().substring(8,9)); },
insertAdjacentHTML
我用insertAdjacentHTML在id为"sspp"的元素里面动态加div，div的id是自动增长的，这个insertAdjacentHTML是在页面onload之后，我点击触发。但是我想删除它同时不影响其它元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
</head><body id="body"><form action="">
<input type="button" onClick="add1()" name="add" value="+">
<input type="button" onClick="cut1()" name="cut" value="-">
<input type="button" onClick="del1()" name="cut" value="清除">
<input type="button" onClick="line1()" name="cut" value="斜线1">
<input type="button" onClick="line2()" name="cut" value="斜线2">
<input type="button" onClick="poly()" name="cut" value="多边形">
</form>
<style>
#sspp{width:100%;height:80%;background-color:#eeeeee}
#idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px;margin:50px;}
#idHandle0{cursor:move; overflow:hidden;}
#idHandle1{cursor:move; overflow:hidden;}
#idHandle2{cursor:move; overflow:hidden;}
#idHandle3{cursor:move; overflow:hidden;}
#idHandle4{cursor:move; overflow:hidden;}
#idHandle5{cursor:move; overflow:hidden;}
#idHandle6{cursor:move; overflow:hidden;}
#idHandle7{cursor:move; overflow:hidden;}
#idHandle8{cursor:move; overflow:hidden;}
#idHandle9{cursor:move; overflow:hidden;}
#idHandle10{cursor:move; overflow:hidden;}
#idHandle11{cursor:move; overflow:hidden;}
</style> <div id="sspp" >
<img id="img" src="1.jpg" onclick="catchMouse()" ></img>
</div> <script type="text/javascript">
var l1 = 0;//是否画线1的标识
var l2 = 0;//是否画线1的标识
var nl1 = 0;//画线1的点有几个
var nl2 = 0;//画线1的点有几个
var ox = 0;
var oy = 0;
var w=3;
var h=3;
var idn = 0;
var id1n = 0;
var id2n = 0;
// 你所点的相对位置数组，是点数组
var pointX = new Array();
var pointY = new Array();
// 你画直线1所点的相对位置数组，是点数组
var l1X = new Array();
var l1Y = new Array();
// 你画直线2所点的相对位置数组，是点数组
var l2X = new Array();
var l2Y = new Array();
// 你所点过的鼠标位置的数组，是点数组
var pointX1 = new Array();
var pointY1 = new Array();
//保存坐标相对误差
var offsetX = 0;
var offsetY = 0;
// 记录鼠标按下点的位置 ，默认是(0,0)
var x=0;
var y=0;
var pointnum=0;
var flag1="0";//保存上一次哪个点被拖动
var flag2="0";//保存上一次哪个点被拖动
var flag3="0";//保存上一次哪个点被拖动
var flag4="0";//保存上一次哪个点被拖动
var isIE = (document.all) ? true : false;
Array.prototype.contains = function (element) {
for (var i = 0; i < this.length; i++) {
if (this[i] == element) {
return true;
}
}
return false;
}
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
var BindAsEventListener = function(object, fun) {
return function(event) {
return fun.call(object, (event || window.event));
}
}
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
//拖放程序
var Drag = Class.create();
Drag.prototype = {
//拖放对象
initialize: function(drag, options) {
this.Drag = $(drag);//拖放对象
this._x = this._y = 0;//记录鼠标相对拖放对象的位置
this._marginLeft = this._marginTop = 0;//记录margin
//事件对象(用于绑定移除事件)
this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);
this.SetOptions(options);
this.Limit = !!this.options.Limit;
this.mxLeft = parseInt(this.options.mxLeft);
this.mxRight = parseInt(this.options.mxRight);
this.mxTop = parseInt(this.options.mxTop);
this.mxBottom = parseInt(this.options.mxBottom);
this.LockX = !!this.options.LockX;
this.LockY = !!this.options.LockY;
this.Lock = !!this.options.Lock;
this.onStart = this.options.onStart;
this.onMove = this.options.onMove;
this.onStop = this.options.onStop;
this._Handle = $(this.options.Handle) || this.Drag;
this._mxContainer = $(this.options.mxContainer) || null;
this.Drag.style.position = "absolute";
//透明
if(isIE && !!this.options.Transparent){
//填充拖放对象
with(this._Handle.appendChild(document.createElement("div")).style){
width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";
}
}
addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Handle: "",//设置触发对象（不设置则使用拖放对象）
Limit: false,//是否设置范围限制(为true时下面参数有用,可以是负数)
mxLeft: 0,//左边限制
mxRight: 9999,//右边限制
mxTop: 0,//上边限制
mxBottom: 9999,//下边限制
mxContainer: "",//指定限制在容器内
LockX: false,//是否锁定水平方向拖放
LockY: false,//是否锁定垂直方向拖放
Lock: false,//是否锁定
Transparent: false,//是否透明
onStart: function(){},//开始移动时执行
onMove: function(){},//移动时执行
onStop: function(){}//结束移动时执行
};
Extend(this.options, options || {});
},
//准备拖动
Start: function(oEvent) {
if(this.Lock){ return; }
if(this.Limit){
//修正错误范围参数
this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
//如果有容器必须设置position为relative来相对定位，并在获取offset之前设置
//!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
}
//记录鼠标相对拖放对象的位置
this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;
//记录margin
this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
//mousemove时移动 mouseup时停止
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
if(isIE){
//焦点丢失
addEventHandler(this._Handle, "losecapture", this._fS);
//设置鼠标捕获
this._Handle.setCapture();
}else{
//焦点丢失
addEventHandler(window, "blur", this._fS);
//阻止默认动作
oEvent.preventDefault();
};
//附加程序
this.onStart();
},
//拖动
Move: function(oEvent) {
//判断是否锁定
if(this.Lock){ this.Stop(); return; };
//清除选择
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//设置移动参数
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
//设置范围限制
if(this.Limit){
//设置范围参数
var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
//如果设置了容器，再修正范围参数
if(!!this._mxContainer){
mxLeft = Math.max(mxLeft, 0);
mxTop = Math.max(mxTop, 0);
mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
};
//修正移动参数
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
}
//设置位置，并修正margin
if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }
if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }
//附加程序
this.onMove();
//var str = "0123456789";//alert(str.substring(0));
//var str = this.Drag.id.toString();
//alert(this.Drag.id.toString().substring(8,9)); },
insertAdjacentHTML
Stop: function() {
pointX[this.Drag.id.toString().substring(8,9)] = this.Drag.offsetLeft-offsetX;
pointY[this.Drag.id.toString().substring(8,9)] = this.Drag.offsetTop-offsetY;
//alert(this.Drag.offsetLeft-offsetX);
//alert(this.Drag.id.toString().substring(8,9)); //alert(flag);
/*
if(this.Drag.id.toString().substring(8,9)=="0"){
del2();
x1=
if(flag.indexOf("0")!=-1||flag.indexOf("1")!=-1){
polygon(pointX[0],pointY[0],pointX[1]+offsetX,pointY[1]+offsetY,pointX[2]+offsetX,pointY[2]+offsetY,pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag.indexOf("2")==-1){
polygon(pointX[0],pointY[0],pointX[1],pointY[1],pointX[2]+offsetX,pointY[2]+offsetY,pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag.indexOf("3")==-1){
polygon(pointX[0],pointY[0],pointX[1]+offsetX,pointY[1]+offsetY,pointX[2],pointY[2],pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag.indexOf("4")!=-1){
polygon(pointX[0],pointY[0],pointX[1],pointY[1],pointX[2],pointY[2],pointX[3]+offsetX,pointY[3]+offsetY);
}
flag+=1;
}
if(this.Drag.id.toString().substring(8,9)=="1"){
del2();
if(flag==0||flag==2){
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1],pointY[1],pointX[2]+offsetX,pointY[2]+offsetY,pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag==1){
polygon(pointX[0],pointY[0],pointX[1],pointY[1],pointX[2]+offsetX,pointY[2]+offsetY,pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag==3){
//alert(1)
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1],pointY[1],pointX[2],pointY[2],pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag==4){
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1],pointY[1],pointX[2]+offsetX,pointY[2]+offsetY,pointX[3],pointY[3]);
}
flag+=2;
}
if(this.Drag.id.toString().substring(8,9)=="2"){
del2();
if(flag==0||flag==3){
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1]+offsetX,pointY[1]+offsetY,pointX[2],pointY[2],pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag==1){
polygon(pointX[0],pointY[0],pointX[1]+offsetX,pointY[1]+offsetY,pointX[2],pointY[2],pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag==2){
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1],pointY[1],pointX[2],pointY[2],pointX[3]+offsetX,pointY[3]+offsetY);
}
if(flag==4){
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1]+offsetX,pointY[1]+offsetY,pointX[2],pointY[2],pointX[3],pointY[3]);
}
flag+=3;
}
if(this.Drag.id.toString().substring(8,9)=="3"){
del2();
if(flag.indexOf("0")!=-1||flagindexOf("4")!=-1){
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1]+offsetX,pointY[1]+offsetY,pointX[2]+offsetX,pointY[2]+offsetY,pointX[3],pointY[3]);
}
if(flag.indexOf("0")!=-1){
polygon(pointX[0],pointY[0],pointX[1]+offsetX,pointY[1]+offsetY,pointX[2]+offsetX,pointY[2]+offsetY,pointX[3],pointY[3]);
}
if(flag==2){
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1],pointY[1],pointX[2]+offsetX,pointY[2]+offsetY,pointX[3],pointY[3]);
}
if(flag==3){
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1]+offsetX,pointY[1]+offsetY,pointX[2],pointY[2],pointX[3],pointY[3]);
}
flag+=4;
}*/
//alert(document.getElementById("idHandle0").style.left.toString().replace("px",""))
if(pointnum==4&&(this.Drag.id.toString().substring(8,9)=="0"||this.Drag.id.toString().substring(8,9)=="1"||this.Drag.id.toString().substring(8,9)=="2"||this.Drag.id.toString().substring(8,9)=="3")){
//alert(pointnum);
var idH0l = parseInt(document.getElementById("idHandle0").style.left.toString().replace("px",""));
var idH1l = parseInt(document.getElementById("idHandle1").style.left.toString().replace("px",""));
var idH2l = parseInt(document.getElementById("idHandle2").style.left.toString().replace("px",""));
var idH3l = parseInt(document.getElementById("idHandle3").style.left.toString().replace("px",""));
var idH0t = parseInt(document.getElementById("idHandle0").style.top.toString().replace("px",""));
var idH1t = parseInt(document.getElementById("idHandle1").style.top.toString().replace("px",""));
var idH2t = parseInt(document.getElementById("idHandle2").style.top.toString().replace("px",""));
var idH3t = parseInt(document.getElementById("idHandle3").style.top.toString().replace("px",""));
//alert(idH0l+"_"+idH1l+"_"+idH2l+"_"+idH3l+"_"+idH0t+"_"+idH1t+"_"+idH2t+"_"+idH3t);
if(this.Drag.id.toString().substring(8,9)=="0"){
del2();
polygon(this.Drag.offsetLeft,this.Drag.offsetTop,idH1l,idH1t,idH2l,idH2t,idH3l,idH3t);
}
if(this.Drag.id.toString().substring(8,9)=="1"){
del2();
polygon(idH0l,idH0t,this.Drag.offsetLeft,this.Drag.offsetTop,idH2l,idH2t,idH3l,idH3t);
}
if(this.Drag.id.toString().substring(8,9)=="2"){
del2();
polygon(idH0l,idH0t,idH1l,idH1t,this.Drag.offsetLeft,this.Drag.offsetTop,idH3l,idH3t);
}
if(this.Drag.id.toString().substring(8,9)=="3"){
del2();
polygon(idH0l,idH0t,idH1l,idH1t,idH2l,idH2t,this.Drag.offsetLeft,this.Drag.offsetTop);
}
}
//移除事件
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this._Handle, "losecapture", this._fS);
this._Handle.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
};
//附加程序
this.onStop();
}
};function add1()
{
w+=1;
h+=1; }
function cut1()
{
if(w>1&&h>1)
{
w-=1;
h-=1;
}
}
function del1()
{
document.getElementById("sspp").parentNode.removeChild(document.getElementById("sspp"));
var s=document.getElementById("body");
s.insertAdjacentHTML("BeforeEnd","<div id='sspp' > <img id='img' src='1.jpg' onclick='catchMouse()' ></img></div>");
pointnum=0;
}function del2()
{
var obj1 = document.getElementById("sspp");
//var obj = document.getElementsByName("poly");
//alert(div.firstChild.id);
//while(div.hasChildNodes()&&(div.lastChild.id!="img"&&div.lastChild.id!="idHandle0"&&div.lastChild.id!="idHandle1"&&div.lastChild.id!="idHandle2"&&div.lastChild.id!="idHandle3"&&div.lastChild.id!="idHandle4"&&div.lastChild.id!="idHandle5"&&div.lastChild.id!="idHandle6"&&div.lastChild.id!="idHandle7"))
//当div下还存在子节点时 循环继续
//{
alert("poly"+idn.toString());
alert(idn);
for(i=0;i<idn;i++)
{
document.getElementById("poly1").parentNode.removeChild(document.getElementById("poly1"));
}
// div.removeChild(div);
// }
/*
while(obj1.hasChildNodes()){
alert(obj1.lastChild.getAttribute("name"));
obj1.removeChild(obj1.lastChild);
}
*/
} function catchMouse()
{
if(l1==0&&l2==0){
//alert('hello');
x=event.clientX;
y=event.clientY;
//alert(x+"_"+y);
ox = event.offsetX;
oy = event.offsetY;
//alert(ox+"_"+oy);
offsetX=x-ox;
offsetY=y-oy;
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<div id='idHandle"+pointnum+"' style='height:10px;left:"+x+"px;top:"+y+"px;width:10px;background:#C4E3FD;overflow:hidden'></div>")
var drag = new Drag("idHandle"+pointnum, { mxContainer: "sspp", Handle: "idHandle"+pointnum, Limit: true
});
if(pointnum<3){
pointX[pointnum]=ox;
pointY[pointnum]=oy;
pointX1[pointnum]=ox+offsetX;
pointY1[pointnum]=oy+offsetY;
pointnum++;
}else if(pointnum==3){
pointX[pointnum]=ox;
pointY[pointnum]=oy;
pointX1[pointnum]=ox+offsetX;
pointY1[pointnum]=oy+offsetY;
polygon(pointX[0]+offsetX,pointY[0]+offsetY,pointX[1]+offsetX,pointY[1]+offsetY,pointX[2]+offsetX,pointY[2]+offsetY,pointX[3]+offsetX,pointY[3]+offsetY);
pointnum++;
}else{
del1();
pointnum=0;
}
}else if(l1==1){
x=event.clientX;
y=event.clientY;
//alert(x+"_"+y);
ox = event.offsetX;
oy = event.offsetY;
//alert(ox+"_"+oy);
offsetX=x-ox;
offsetY=y-oy;
if(nl1<2){
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<div id='idHandle"+(nl1+4)+"' style='height:10px;left:"+x+"px;top:"+y+"px;width:10px;background:#C4E3FD;overflow:hidden'></div>")
var drag = new Drag("idHandle"+(nl1+4), { mxContainer: "sspp", Handle: "idHandle"+(nl1+4), Limit: true
});
}
if(nl1<1){
l1X[nl1]=ox;
l1Y[nl1]=oy;
nl1++;
}else if(nl1==1){
l1X[nl1]=ox;
l1Y[nl1]=oy;
line(l1X[0]+offsetX,l1Y[0]+offsetY,l1X[1]+offsetX,l1Y[1]+offsetY);
nl1++;
}else{
}
}else if(l2==1){
x=event.clientX;
y=event.clientY;
//alert(x+"_"+y);
ox = event.offsetX;
oy = event.offsetY;
//alert(ox+"_"+oy);
offsetX=x-ox;
offsetY=y-oy;
if(nl2<2){
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<div id='idHandle"+(nl2+6)+"' style='height:10px;left:"+x+"px;top:"+y+"px;width:10px;background:#C4E3FD;overflow:hidden'></div>")
var drag = new Drag("idHandle"+(nl2+6), { mxContainer: "sspp", Handle: "idHandle"+(nl2+6), Limit: true
});
}
if(nl2<1){
l2X[nl2]=ox;
l2Y[nl2]=oy;
nl2++;
}else if(nl2==1){
l2X[nl2]=ox;
l2Y[nl2]=oy;
line(l2X[0]+offsetX,l2Y[0]+offsetY,l2X[1]+offsetX,l2Y[1]+offsetY);
nl2++;
}else{
}
}
//window.setTimeOut('catchMouse()',3);
//alert(x+"_"+y);
}
function makedot(x,y){ //画点函数
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<div id='poly"+idn+"' style='height:"+h+"px;position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;background:#f00;overflow:hidden'></div>");
idn++;
}
function makedot1(x,y){ //画点函数
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<div id='l1"+id1n+"' style='height:"+h+"px;position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;background:#f00;overflow:hidden'></div>");
ld1n++;
}
function makedot2(x,y){ //画点函数
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<div name='l2"+id2n+"' style='height:"+h+"px;position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;background:#f00;overflow:hidden'></div>");
id2n++;
}
/**
函数功能：根据给定的圆心和半径画圆
函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。
*/
function circle(x,y,r){ //(x,y)圆心，r半径
var dotx,doty,radio;
var Pi=Math.PI;
makedot(x,y);
for(var i=0;i<360;i+=0.5){
radio=i*Pi/180;
dotx=r*Math.cos(radio)+x;
doty=r*Math.sin(radio)+y
makedot(dotx,doty);
}
}/**
函数功能：根据指点矩形左上角坐标及长宽绘制矩形。
函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标
*/
function rect(x,y,w,h){ //(x,y)左上角坐标,w,h 宽与高
for(var i=0;i<w;i++){
makedot(x+i,y);
makedot(x+i,y+h);
}
for(var i=0;i<h;i++){
makedot(x,y+i);
makedot(x+w,y+i);
}
}/**
函数功能：根据两点坐标画直线。
函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理
*/
function line(x1,y1,x2,y2){
var slope=(y2-y1)/(x2-x1); //斜率
var diff=x2-x1;
if(x1<x2){
for(var i=0;i<diff;i++){
if(pointX.contains(x1+i)==false&&pointY.contains(y1+slope*i)==false){
if(l1==0&&l2==0){
makedot(x1+i,y1+slope*i);
}else if(l1==1){
makedot1(x1+i,y1+slope*i);
}else if(l2==1){
makedot2(x1+i,y1+slope*i);
}
}
}
}else if(x1>x2){
for(var i=0;i>diff;i--){
if(pointX.contains(x1+i)==false&&pointY.contains(y1+slope*i)==false){
makedot(x1+i,y1+slope*i);
}
}
}else{ //画垂直线
var temp=y2-y1;
if(temp>0){
for(var i=0;i<temp;i++){
if(pointX.contains(x1+i)==false&&pointY.contains(y1+slope*i)==false){
makedot(x1,y1+i);
}
}
}else{
for(var i=0;i>temp;i--){
if(pointX.contains(x1+i)==false&&pointY.contains(y1+slope*i)==false){
makedot(x1,y1+i);
}
}
}
}
}//画一条斜线，平行与磅的左边
function line1(x1,y1,x2,y2){
l1=1;
l2=0;
}
//画一条斜线，平行与磅的上边
function line2(x1,y1,x2,y2){
l1=0;
l2=1;
}//画多边形，为地磅的范围
function line2(x1,y1,x2,y2){
l1=0;
l2=0;
}/**
函数功能：根据给定的三点坐标画三角形
函数思路：直接利用画线函数画三条线即可
*/
function triangle(x1,y1,x2,y2,x3,y3){
line(x1,y1,x2,y2);
line(x2,y2,x3,y3);
line(x1,y1,x3,y3);
}/**
函数功能：根据给定的一系列坐标点画多边形
函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线
*/
function polygon(){
var args=arguments.length;
if(args%2!=0) return -1;
var realargs=args/2; //坐标个数
for(var i=0;i<realargs-1;i++){
line(arguments[i*2],arguments[i*2+1],arguments[i*2+2]+1,arguments[i*2+3]);
}
line(arguments[i*2],arguments[i*2+1],arguments[0]+1,arguments[1]);
// alert(document.getElementById("idHandle0"));
var sp=document.getElementById("sspp"); }
//circle(500,500,200);
//rect(100,100,200,100);
//triangle(200,200,100,400,300,400);
//polygon(300,300,400,100,600,100,700,300,600,500,400,500);</script>
</body>
</html>
删除元素就按你这样这可以
document.getElementById("sspp").parentNode.removeChild(document.getElementById("sspp"));
如果就清空 sspp 可以 document.getElementById("sspp").innerHTML=""
--------------------------------
我看你实现我功能，你可以考虑，VML,SVG 来实现
我重绘多边形就是要把以前的边删掉 保留4个顶点
function del2()
{
while(idn--){
var el=document.getElementById("poly"+idn);
el.removeNode(1);
}
}
我还要实现拖拽的 估计会很麻烦把
你原来是这样写的，ID都没变，当然出错了
document.getElementById("poly1").parentNode.removeChild(document.getElementById("poly1"));用VML,你拖拽功能还是一样可以用，就是画线，形状部分改