用鼠标点击获取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

这里正是参观你的阵列你问了。

小提琴：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); 
}); 

UPDATE： OP请求的方式来限制COORDS和删除一个。

小提琴：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(" ")); 
} 

Answer 2

在您的现有元素之后添加一个新元素<div id="log"></div>。

在你的JavaScript代码添加

document.getElementById("log").innerHTML += "<br/>Coordinates: X=" + x + "; Y=" + y; 

在你的jsfiddle例如：

$display.html($display.html() + '<br/> x: ' + x + ', y: ' + y); 

Answer 3

我这样做是使用div元素，但你可以改变它。
见fiddle

我的JS变化

$display.append($('<div />').text('x: ' + x + ', y: ' + y)); 

而在HTML

<div class='clickable'> 
    <div class='display'></div> 
</div> 

或者this one，具有srollbar需要的时候。

Answer 4

如果你想保存坐标，你可以收集他们在一个数组，像这样：

//Declare an array with 0 length 
var arr = new Array(0); 
$('.clickable').bind('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); 
//increase the length of array before insert the value of coords 
arr.length = arr.length+1; 
//insert the value 
arr[arr.length-1] = "coordinates" + arr.length + ":" + x +"/" + y; 
}); 

然后，操作坐标，你可以与环