Question

我正在创建一个jQuery脚本，在点击事件中为地图添加一个图钉，问题是我需要该事件只在地图上工作而不是他的儿子..

这是我的代码：

$("div#map").click(function (e) {
    $('<div class="pin"></div>').css({
        left: a_variable,
        top: another_variable
    }).appendTo(this);

    $("div.pin").click(function (e) { e.stopPropagation(); });
})

另一个问题是在这段代码下我有类似的东西：

$("div.pin").mousedown(function (e) {
    if(e.which == 1) {
        console.log("down");
        moving = true;
        $(this).addClass("moving");
    } else if(e.which == 3) {
        console.log("right");
    }
});

这会在脚本加载后创建引脚吗？

JsFiddle：http://jsfiddle.net/vB2Gb/

Answer 1

我对您的代码进行了一些调整：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/vB2Gb/1/

$(function () {
    var $map = $("div#map");
    $map.click(function (e) {
        var $pin = $('<div class="pin"></div>').css({
            left: (((e.pageX + 3 - $map.position().left) * 100) / $map.width()) + "%",
            top: (((e.pageY - 10 - $map.position().top) * 100) / $map.height()) + "%"
        });
        $pin.appendTo($map);
    })
    $map.on('click', "div.pin", function (e) {
        e.stopPropagation();
    });

    var moving = false;

    var pin_id;
    var pin_left;
    var pin_top;

    $map.on('mousedown', "div.pin", function (e) {
        if (e.which == 1) {
            console.log("down");
            moving = true;
            $(this).addClass("moving");
        } else if (e.which == 3) {
            console.log("right");
        }
    });

    $map.on('contextmenu', "div.pin", function (e) {
        return false;
    });

    $(document).mousemove(function (e) {
        if (moving) {
            if (e.pageX <= $map.position().left) {
                pin_left = 0;
            } else if (e.pageY <= $map.position().top) {
                pin_top = 0;
            } else {
                console.log("moving");
                pin_id = 1;
                pin_left = (((e.pageX + 3 - $map.position().left) * 100) / $map.width());
                pin_top = (((e.pageY - 10 - $map.position().top) * 100) / $map.height());
                $(".moving").css("left", pin_left + "%");
                $(".moving").css("top", pin_top + "%");
            }
        }
    });

    $(document).mouseup(function (e) {
        if (moving) {
            console.log("up");
            moving = false;
            $(".moving").removeClass("moving");
            dbMovePin(pin_id, pin_left, pin_top);
        }
    });

});

function dbMovePin(pin_id, pin_left, pin_top) {
    $.post(
        "mapsave.php", {
        action: "move_pin",
        id: pin_id,
        left: pin_left,
        top: pin_top
    },

    function (data, status) {
        //alert("Data: " + data + "\nStatus: " + status);
    });
}

这包括对鼠标按下事件和引脚点击使用委派事件（使用on）。共享地图等的单个变量

Answer 2

事件代表团做我需要的事情：

我已经改变了

 $("div.pin").mousedown(function (e) { ... });

与

$("div#map").on("mousedown", "div", function (e) {

Answer 3

由于您正在处理动态添加的元素，因此您需要使用event delegation。

$("#map").click(function (e) {
    $('<div class="pin"></div>').css({
        left: a_variable,
        top: another_variable
    }).appendTo(this);
}).on('click', '.pin', function (e) {
    //have a single delegated click handler
    e.stopPropagation();
}).on('mousedown', '.pin', function (e) {
    //use a delegated handler for mousedown also
    if (e.which == 1) {
        console.log("down");
        moving = true;
        $(this).addClass("moving");
    } else if (e.which == 3) {
        console.log("right");
    }
})

另见 Event binding on dynamically created elements?

jQuery event.stopPropagation（）和事件问题

3 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/vB2Gb/1/