用鼠標點擊獲取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; 
}); 

然後，操作座標，你可以與環