• 有关在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="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永远得不到调用
  • 相关阅读:
    Mysql事务隔离级
    51nod1076(tarjan)
    求无向图的割点和桥模板(tarjan)
    51nod1770(xjb)
    51nod1640(kruscal)
    51nod1639(组合数学)
    51nod1625(枚举&贪心)
    51nod1562(set&模拟)
    51nod1483(打表)
    51nod1475(贪心&枚举)
  • 原文地址:https://www.cnblogs.com/yukun/p/1131685.html
Copyright © 2020-2023  润新知