Получить координаты X/Y с Mouseclick

Question

Я пытаюсь получить координаты X/Y из div с помощью мышки.

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); 
}); 

UPDATE: OP запросил способ ограничить COORDS и удалить один.

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(" ")); 
} 

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; 
}); 

Затем, чтобы работать координаты вы можете объехать ваш массив с для цикла