Question

我编写了一个函数来获取click事件的形状ID。我想根据点击事件检索到的ID在鼠标移动时创建一个形状。

var svg = d3.select("body")
                    .append("svg")
                    .attr("width", 800)
                    .attr("height", 803);

            var $stageContainer = $("#content");
            var stageOffset = $stageContainer.offset();
            var offsetX = stageOffset.left;
            var offsetY = stageOffset.top;
            console.log(offsetX + " " + offsetY);

            function getId(Id) {
                $('a').on("click", function () {
                    var shapeId = this.id;
                    console.log(shapeId);
                    return shapeId;
                }).on('mousemove',function(shapeId)
                {
                    if(shapeId == "newTask")
                    {
                        console.log("shape is newTask");
                        function createCircle();
                    }
                })
            }
            function createCircle() {
                svg.append("circle")
                        .attr("id", "onCircleDragStart")
                        .attr("r", 25)
                        .attr("cx", d3.select(this).attr("cx"))
                        .attr("cy", d3.select(this).attr("cy"))
                        .classed("dragTarget", true)
            }

但是，它不起作用。如何根据检索到的ID在mousemove上创建形状？

<div id="content">
            <div style="position: relative; height: 100%;">
                <div style="display: inline-block; height: 100%; vertical-align: top; border-right: 2px solid darkcyan;" id="sidebar">
                    <div><a id="newTask" title="Add new task" draggable="true"><img src="task.png" /></a></div>
                    <div><a id="newGateway" title="Add new gateway" draggable="true"><img src="gateway.png" /></a></div>
            </div>
        </div>
    </div>

Answer 1

jQuery的on方法回调的第一个参数是mousemove事件发生时捕获的事件，这就是shapeId永远不会出现的原因＃34 ; newTask＆＃34; （如果在mouseover处理程序中执行console.log(shapeId);，则应该看到一个事件对象而不是字符串。）

您应该将shapeId的值存储在定义了click和mouseover处理程序的范围内，例如：

function getId(Id) {
    var shapeId;
    $('a').on("click", function (event) {
        shapeId = this.id;
        console.log(shapeId);
    }).on('mousemove',function(event)
    {
        if(shapeId == "newTask")
        {
            console.log("shape is", shapeId);
            function createCircle();
        }
    })
}

PS：我没有测试过，让我知道它是否有效。

如何根据Id移动形状

1 个答案: