javascript - 在 mouseup 事件后单击时移动的 SVG 路径

Question

我正在尝试使用 SVG 线连接两个动态创建的 div。为了做到这一点，我为每个 div 创建了一个输出端口，从 SVG 路径开始。在从输出端口单击并拖动鼠标时，SVG 路径会移动并跟随光标。但是，当我点击其他地方完成后，它会改变它的位置。基本上，它的路径在鼠标向上事件之后得到更新。无论我单击何处，鼠标上移后该行都不应移动。我无法理解我的代码中的错误。
https://codepen.io/iamkrptonite/pen/ExZXjor

$(document).ready(function(){
    const boundary = $(".boundary")
    const outport = $(".outport")
    const bezierWeight = 0.6;
    var boxX = boundary[0].offsetLeft;
    var boxY = boundary[0].offsetTop;
    $(boundary).click(function(){
        console.log("boom")
    })

    $(outport).on("mousedown",function(e){
        var imouseX = e.pageX-boxX;
        var imouseY = e.pageY-boxY;
        $(boundary).on("mousemove",function(e){
            var mouseX = e.pageX-boxX;
            var mouseY = e.pageY-boxY;
            updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
        }).mouseup(function (e) {
            var mouseX = e.pageX-boxX;
            var mouseY = e.pageY-boxY;
            updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
            $(this).unbind('mousemove');
            $(this).unbind('mousedown');
            $(this).unbind('mouseclick');
        })
    }).mouseup(function(){
        $(this).unbind('mousemove');
        $(this).unbind('mousedown');
        $(this).unbind('mousedown');
    })



    function updateBoxesPath(imouseX,imouseY,mouseX,mouseY) {
        var boxPath = document.getElementById("boxPath_0");
        var x1 = imouseX;
        var y1 = imouseY;
        var x4 = mouseX;
        var y4 = mouseY;
        var dx = Math.abs(x4 - x1) * bezierWeight;
        var x2 = x1 + dx;
        var x3 = x4 - dx;
        var boxData = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
        boxPath.setAttribute("d", boxData);
    }

})

Answer 1

您必须取消绑定(bind) mouseup，但您也必须精确选择相同的选择器:(我建议您使用 .off，不推荐使用 .unbind)

$(outport).on("mousedown",function(e){
    var imouseX = e.pageX-boxX;
    var imouseY = e.pageY-boxY;
    $(boundary).on("mousemove",function(e){
        var mouseX = e.pageX-boxX;
        var mouseY = e.pageY-boxY;
        updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
    }).mouseup(function (e) {
        var mouseX = e.pageX-boxX;
        var mouseY = e.pageY-boxY;
        updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
        $(boundary).off('mousemove mouseup');
        $(outport).off('mousedown');
    })
});

当然，在取消绑定(bind)不同的事件之后，您必须再次绑定(bind)(.on)才能重新激活另一条路径。