d3选取元素并在元素添加mouseup事件监听但是不能触发监听函数执行?

代码取自 https://github.com/mjf1310/workflow_web.git 的代码片段。
如下:

_this.drawStart = function(eleM,x,y,r){
        var svg;
        if(eleM&&eleM.length>0){
            svg = d3.select(eleM);
        }else{
            return false;
        }
        var startDataObj = _DrawDataObjFactory.createDrawDataObj("startCircle",x,y,x+r,y+r,r,0,0,0,0,0,0);
        _DrawDataObjFactory.saveDataNode(startDataObj);

        var g = svg.append("g");
        var startObj = g.append("circle");
        startObj.attr("id",startDataObj.id)
                .attr("name",startDataObj.name)
                .attr("cx", x+r)
                .attr("cy", y+r)
                .attr("r", r)
                .attr("opacity","0.5")
                .attr("fill","#F0E68C")
                .attr('stroke','blue')
                .attr('stroke-width',1);
        startObj.on("mouseup",function(e){
            _this.graphMouseUp(e);
        });
        startObj.on("mousedown",function(e){
            _this.graphMouseDown(e);
        });

        _this.dynamicCreateContextMenu(startDataObj.id);

        var startTextDataObj = _DrawDataObjFactory.createDrawDataObj("startText",x+r/2,y+r,x,y,r,0,0,0,0,0,0);

        g.append("text")
            .attr("id",startTextDataObj.id)
            .attr("name",startTextDataObj.name)
            .attr("x",x+r/2)
            .attr("y",y+r)
            .attr("font-family","STSong")
            .attr("font-size","30")
            .attr("fill","blue")
            .attr("stroke","black")
            .text("开始")
            .call(_this.dragText());
        return g.node();
    };

以下为事件监听代码,但是mouseup事件的代码不能触发执行。

    startObj.on("mouseup",function(e){
            _this.graphMouseUp(e);
        });
        startObj.on("mousedown",function(e){
            _this.graphMouseDown(e);
        });

以下为事件监听函数


_this.graphMouseDown = function(e){
        if (d3.event.button != 0 && d3.event.buttons!=1){
            return false;
        }

        /**
         * mouseup事件失效的解决方案
         */
        _this.d3PauseEvent(e);

        var drawId = _this.param.drawId;
        /**var self = $(e.currentTarget);**/
        var self = d3.select(d3.event.currentTarget);
        var id = self.attr("id");
        if(drawId && drawId.length>0){
            /**var offsetX = e.offsetX;
            var offsetY = e.offsetY;
            var x = e.pageX;
            var y = e.pageY;**/
            var e1 = d3.event;
            var offsetX = e1.offsetX;
            var offsetY = e1.offsetY;
            var x = e1.x;
            var y = e1.y;
            var drawDataObj;
            if('arrow'==drawId){
                drawDataObj  = _DrawDataObjFactory.createDrawDataObj("arrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+50,y+80);
            }else if('horitionalArrow'==drawId){
                drawDataObj  = _DrawDataObjFactory.createDrawDataObj("horitionalArrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+85,y+85);
            }else if('verticalArrow'==drawId){
                drawDataObj  = _DrawDataObjFactory.createDrawDataObj("verticalArrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+85,y+80);
            }else{
                return;
            }

            var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id);
            if(drawDataObjVal && typeof(drawDataObjVal)=="object"){
                drawDataObj.preId = drawDataObjVal.id;
                drawDataObj.preObj = drawDataObjVal;

                drawDataObjVal.nextId = drawDataObj.id;
                drawDataObjVal.nextObj = drawDataObj;
                _this.edge.prefObj = drawDataObjVal;
            }
            _this.edge.drawDataObj = drawDataObj;
            _this.edge.currentObj = drawDataObj;
            _this.edge.pathData = [];
            var data = [];
            data.push(x);
            data.push(y);
            _this.edge.pathData.push(data);
            var path = d3.path();
            path.moveTo(x,y);
            _this.edge.path = path;
        }
    };


    _this.graphMouseUp = function(e){
        if (d3.event.button != 0 && d3.event.buttons!=1){
            return false;
        }

        /**var self = $(e.currentTarget);**/
        var self = d3.select(d3.event.currentTarget);
        var id = self.attr("id");
        var drawId = _this.param.drawId;
        if(drawId && drawId.length>0){
            var svg = d3.select("#drawMainDiv svg[id=draw_bg_svg]");
            if('arrow'==drawId){
                var g = svg.append("g");
                var pathObj = g.append("path");
                _this.edge.path.closePath();
                pathObj.attr("id",_this.edge.drawDataObj.id)
                       .attr("name",_this.edge.drawDataObj.name)
                       .attr("d", _this.edge.path)
                       .attr("fill","none")
                       .attr("stroke","#00FF00")
                       .attr("stroke-width",3)
                       //.call(_this.addZoomTransform())
                       .call(_this.dragPath());
                pathObj.on("mousedown",function(e){
                    _this.addClick(e);
                });

                _this.edge.drawDataObj.path = _this.edge.path;
                var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id);
                if(drawDataObjVal && typeof(drawDataObjVal)=="object"){
                    _DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj);
                    _DrawDataObjFactory.updateDataNode(_this.edge.prefObj);

                    _this.edge.nextObj = drawDataObjVal;
                    _this.edge.drawDataObj.nextId = drawDataObjVal.id;
                    _this.edge.drawDataObj.nextObj = drawDataObjVal;
                    _DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj);

                    drawDataObjVal.preId = _this.edge.drawDataObj.id;
                    drawDataObjVal.preObj = _this.edge.drawDataObj;
                    _DrawDataObjFactory.updateDrawDataObj(drawDataObjVal);
                    _DrawDataObjFactory.updateDataNode(drawDataObjVal);
                }

                _DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj);
                //pathObj.call(_this.addZoomTransform());
                return g.node();
            }
            if('horitionalArrow'==drawId){
                var g = svg.append("g");
                var pathObj = g.append("path");
                _this.edge.path.closePath();
                pathObj.attr("id",_this.edge.drawDataObj.id)
                       .attr("name",_this.edge.drawDataObj.name)
                       .attr("d", _this.edge.path)
                       .attr("fill","none")
                       .attr("stroke","#00FF00")
                       .attr("stroke-width",3)
                       //.call(_this.addZoomTransform())
                       .call(_this.dragPath());
                pathObj.on("mousedown",function(e){
                    _this.addClick(e);
                });

                var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id);
                if(drawDataObjVal && typeof(drawDataObjVal)=="object"){
                    _DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj);
                    _DrawDataObjFactory.updateDataNode(_this.edge.prefObj);

                    _this.edge.nextObj = drawDataObjVal;
                    _this.edge.drawDataObj.nextId = drawDataObjVal.id;
                    _this.edge.drawDataObj.nextObj = drawDataObjVal;
                    _DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj);

                    drawDataObjVal.preId = _this.edge.drawDataObj.id;
                    drawDataObjVal.preObj = _this.edge.drawDataObj;
                    _DrawDataObjFactory.updateDrawDataObj(drawDataObjVal);
                    _DrawDataObjFactory.updateDataNode(drawDataObjVal);
                }

                _this.edge.drawDataObj.path = _this.edge.path;
                _DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj);
                //pathObj.call(_this.addZoomTransform());
                return g.node();
            }
            if('verticalArrow'==drawId){
                var g = svg.append("g");
                var pathObj = g.append("path");
                _this.edge.path.closePath();
                pathObj.attr("id",_this.edge.drawDataObj.id)
                       .attr("name",_this.edge.drawDataObj.name)
                       .attr("d", _this.edge.path)
                       .attr("fill","none")
                       .attr("stroke","#00FF00")
                       .attr("stroke-width",3)
                       //.call(_this.addZoomTransform())
                       .call(_this.dragPath());
                pathObj.on("mousedown",function(e){
                    _this.addClick(e);
                });

                var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id);
                if(drawDataObjVal && typeof(drawDataObjVal)=="object"){
                    _DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj);
                    _DrawDataObjFactory.updateDataNode(_this.edge.prefObj);

                    _this.edge.nextObj = drawDataObjVal;
                    _this.edge.drawDataObj.nextId = drawDataObjVal.id;
                    _this.edge.drawDataObj.nextObj = drawDataObjVal;
                    _DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj);

                    drawDataObjVal.preId = _this.edge.drawDataObj.id;
                    drawDataObjVal.preObj = _this.edge.drawDataObj;
                    _DrawDataObjFactory.updateDrawDataObj(drawDataObjVal);
                    _DrawDataObjFactory.updateDataNode(drawDataObjVal);
                }

                _this.edge.drawDataObj.path = _this.edge.path;
                _DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj);
                //pathObj.call(_this.addZoomTransform());
                return g.node();
            }
        }
    };

mouseup事件监听出问题了。

1个回答

把事件监听 写在 页面加载完成时再执行

JueJiJiangHu1315
绝迹江湖 我就是这样子的啊
17 天之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问