javascript - 使用鼠标单击获取 X/Y 坐标

Question

我正在尝试通过单击鼠标从 div 获取 X/Y 坐标。

I allready use this script:

现在我想收集更多的 X/Y 坐标，而不仅仅是一个。所以如果我在 div 中单击两次或更多次，我想列出 div 下的坐标。

<div>"click"
"click"</div>
------------------------
coordinates 1: X/Y
coordinates 2: X/Y
.
.
.

有人知道我是怎么做到的吗？

Answer 1

这正是您所要求的。

fiddle :http://jsfiddle.net/ZZEk8/118/

添加到 HTML:

<span class="log"></span>

JS:

var clicks = [],
    updatedClicks = "";
$('.clickable').on('click', function (ev) { //We don't use .bind() after jQuery 1.7, use .on() now.
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;

    $display.text('x: ' + x + ', y: ' + y);
    clicks.push(x + "/" + y);

    updatedClicks += "coordinates" + " " + clicks.length + ":" + " " + clicks[clicks.length -1] + "<br />";

    $('.log').html(updatedClicks);
});

更新:OP 请求一种限制坐标并删除坐标的方法。

fiddle :http://jsfiddle.net/ZZEk8/125/

var clicks = [],
    updatedClicks = [],
    limit = 5;

$('.clickable').on('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;

    $display.text('x: ' + x + ', y: ' + y);

    //Stops adding at limit
    if (clicks.length < limit){
        addCoord(x,y);
    }
});

$('.delete').on('change', function(ev) {
    if(clicks.length){
        var selection = this.value -1;
        deleteCoord(selection);
    } else { //If there are no coords to delete run this
        return false;
    }
});

function addCoord (x,y){
    clicks.push(x + "/" + y);

    updatedClicks.push("Coordinates" + ":" + " " + clicks[clicks.length -1] + "<br />");

    $('.log').html(updatedClicks.join(" "));
}

function deleteCoord(selection) {
    clicks.splice(selection, 1);
    updatedClicks.splice(selection, 1);
    $('.log').html(updatedClicks.join(" "));
}