zoukankan      html  css  js  c++  java
  • 有关在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永远得不到调用
  • 相关阅读:
    核心数据类型
    Python入门
    [多校联考2019(Round 4 T2)][51nod 1288]汽油补给(ST表+单调栈)
    [Codeforces 1228E]Another Filling the Grid (排列组合+容斥原理)
    [luogu5339] [TJOI2019]唱、跳、rap和篮球(容斥原理+组合数学)(不用NTT)
    用生成函数推导数列的通项公式
    [Luogu 5465] [LOJ 6435] [PKUSC2018]星际穿越(倍增)
    [BZOJ4569] [Luogu 3295] [SCOI2016]萌萌哒(并查集+倍增)
    [BZOJ4444] [Luogu 4155] [LOJ 2007] [SCOI2015]国旗计划(倍增)
    倍增好题记录
  • 原文地址:https://www.cnblogs.com/yukun/p/1131685.html
Copyright © 2011-2022 走看看