您的位置:首页 > Web前端 > JQuery

jquery事件委托的回调函数中调用全局变量的简单方法

2017-09-04 14:33 323 查看
问题:在用openlayers3开发GIS系统时,出现一个问题,代码片段如下:
//鼠标右键添加点击事件
    $(map.getViewport()).on("contextmenu", function(event){
        map.removeInteraction(draw);
        var pixel = map.getEventPixel(event.originalEvent);//获取鼠标当前像素点
        var hit = map.hasFeatureAtPixel(pixel);  //通过像素点判断当前鼠标上是否有图形 
        var coordinate = map.getEventCoordinate(event);//获取鼠标坐标
        console.log(coordinate);
        event.preventDefault();       //取消右键默认行为
        //if(hit){
        $("#contextmenu_container ul").html("<li><a class='update_feature'>更改坐标</a></li>"+
            "<li><a class='delete_feature'>删除要素</a></li>"+
            "<li><a class='copy_feature'>复制要素</a></li>"+
            "<li><a class='paste_feature'>粘贴要素</a></li>"+
            "<li><a class='edit_feature'>编辑属性</a></li>");
        menu_overlay.setPosition(coordinate);//在鼠标位置展示menu_overlay
            
        //}else{
        //    menu_overlay.setPosition(undefined);//将menu_overlay隐藏
        //}
        
        
        
        // 删除要素
        $("a.delete_feature").on("click",delete_feature);
        //更改坐标
        $("a.update_feature").on("click",update_feature);
        //复制要素
        $("a.copy_feature").on("click",copy_feature);
        //粘贴要素
        $("a.paste_feature").on("click",paste_feature);
        //编辑要素的属性
        $("a.edit_feature").on("click",edit_feature);

        //select.getFeatures().clear();//鼠标右键之后取消要素的高亮选中效果
    });
    
    //右键为建筑物添加立面计算--此边
    function vertical_edge(){
        menu_overlay.setPosition(undefined);
        if(select.getFeatures().getLength()>0){
            console.log(coordinate);  //显示结果为undefined
        }
        select.getFeatures().clear();
    }
    上述代码片段中$("a.this_edge").on("click",vertical_edge); //为此边添加建筑物立面计算,在回调函数中console.log(coordinate);的输出结果为undefined,因为这种写法回调函数中并不能调用全局变量,改正之后:
    将上面事件委托代码换成$("a.this_edge").on("click",{coordinate:coordinate},vertical_edge); 
    回调函数内部处理:
    function vertical_edge(event){
        menu_overlay.setPosition(undefined);
        if(select.getFeatures().getLength()>0){
            console.log(event.data.coordinate);
        }
        select.getFeatures().clear();
    }
    这样的话就可以访问函数之外的全局变量了。。。
    
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery openlayers3