这两天为了实现在网页上画矢量图形,找类库、资料弄的自己是伤痕累累,不过最好找到了比较好的js类库,能比较好的画出来,而且使用它也能画出橡筋线,但是随之而来的问题又发生了,就是对于在新画的图层是动态建立的,并且其定位是使用绝对定位,因此这给其绘制带来的问题,我本身显示的底图是来自于google,而动态的接受绘画的图层与google显示的那个层是兄弟关系,这在捕获时发生了

function load()
{

if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map"));
map.drawLine=false;
map.drawPts=[];
map.setCenter(new GLatLng(37.4224, -122.0838), 13);
map.addControl(new GLargeMapControl());
GEvent.addListener(map, 'click', mapClick);
GEvent.addListener(map,'mousemove',mapMouseMove);
}
jg = new jsGraphics("map");
}
function mapClick(marker,clickedPoint)


{
alert('test');
if(map.drawLine==false)

{
oldpt=map.fromLatLngToDivPixel(clickedPoint);
map.drawPts.push(oldpt);
map.drawLine=true;
GEvent.addListener(map, 'click', mapClick);
}

else

{
var newpt=map.fromLatLngToDivPixel(clickedPoint);
map.drawPts.push(newpt);
jg.clear();
jg.drawLine(oldpt.x,oldpt.y,newpt.x,newpt.y);
oldpt=newpt;
jg.paint();
}
}
function mapMouseMove(latlng)


{
if(map.drawLine==true)

{
var newpt=map.fromLatLngToDivPixel(latlng);
jg.clear();
jg.drawLine(oldpt.x,oldpt.y,newpt.x,newpt.y);
jg.paint();
}
else
return;
}
你看这是我的绘制代码,单击绘制下一个节点时就实现问题了
下面看其绘制出来的html代码

由于两个div是兄弟关系,而不是父子关系,因此在这些div上单击两个div不会同时捕获鼠标事件,而只是最上面的的一个div捕获鼠标事件。
那个简单的例子吧
<div id="container" style="800px; height:200px; position:absolute; top:610; left:0; z-index:1000;" onclick="javascript:void(alert('container'))">
test
</div>
<div id="dynamatic" style="800px; height:200px; position:absolute; top:610; left:0; z-index:999;" onclick="javascript:void(alert('dynamatic'))">
dynamatic
</div>
上面两个div位于同样的位置,并且对鼠标单击事件都有相应,但是运行可以看出击发的函数总是最上面的函数,这里通过z-index属性将图层叠放的属性指定。
这里由于container放在上面,因此单击这个div永远都是出发container总的函数,而dynamatic永远得不到调用