有关在div中的嵌套事件

这两天为了实现在网页上画矢量图形,找类库、资料弄的自己是伤痕累累,不过最好找到了比较好的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="width:800px; height:200px; position:absolute; top:610; left:0; z-index:1000;" onclick="javascript:void(alert('container'))">
    test
</div>
<div id="dynamatic" style="width: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永远得不到调用
posted @ 2008-03-31 19:39  枫崖  阅读(826)  评论(0编辑  收藏  举报