mouseup 在 mousedown 后不会被触发

Question

mouseup 在 mousedown 后不会被激活。 我不知道为什么。 但是如果我取消注释该行

$(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>");

然后 mouseup 正常工作。 这是一段代码

var onmousemove = function ($canvas) {
       // Painting the map with canvas
        $map_canvas.mousedown(function () {
            var ignoreMouseMove = false;
            mouseDownFired = true;



            $(".map .row div").mousemove(function (e) {

                if (ignoreMouseMove) return;
                //$(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>");

                moveCanvas($canvas, e)
            }).mouseup(function () {
                ignoreMouseMove = true;
            });


        });

        var paletteClone = $(document).clone(true);     // bound handler for .palette div

};



var moveCanvas = function ($canvas, e) {
    $(".map ul li." + $canvas).offset({
        left: e.pageX - 30,
        top: e.pageY - 30
    });
};

Answer 1

您将mouseup事件绑定到一个 DOM 元素，然后在mousemove事件中替换该元素 - mouseup事件无法运行，因为该元素不再位于页面上。

另一种方法是使用.map .row的父级使用on函数绑定mouseup事件 - 这将事件绑定到父级，因此添加的元素仍然获得您期望的行为。

var onmousemove = function ($canvas) {
   // Painting the map with canvas
    $map_canvas.mousedown(function () {
        var ignoreMouseMove = false;
        mouseDownFired = true;

        $(".map .row").on("mousemove", "div", (function (e) {

            if (ignoreMouseMove) return;

            // this is now OK - event bound to parent 
            $(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>");

            moveCanvas($canvas, e)
        }).on("mouseup", "div", function () {
            ignoreMouseMove = true;
        });


    });

    var paletteClone = $(document).clone(true);     // bound handler for .palette div

};



var moveCanvas = function ($canvas, e) {
    $(".map ul li." + $canvas).offset({
        left: e.pageX - 30,
        top: e.pageY - 30
    });
};