VDS за 300р от нашего партнера SpaceWeb
[2]
03 Июл 2012, 15:33

Определение клика по елементу

Доброго времени суток.
есть следующий код:

shapes = [];
createRect = function (x, y) { shape = r.rect(x, y, 95, 25, 20); shapes.push(shape); text = r.text(x + 40, y + 10, "New node"); texts.push(text); for (i = 1; i < shapes.length; i++) { tcolor = "#4C5053"; scolor = "#BDBFC1"; fcolor = "#FCFEFF"; shapes[i].attr({ fill: fcolor, stroke: scolor, "stroke-width": 2, cursor: "move" }); texts[i].attr({ fill: tcolor, stroke: "none", "font-size": 15, cursor: "move" }); array = new Object(); array[i] = ("shapes" + i); shapes[i].pair = texts[i]; texts[i].pair = shapes[i]; shapeLength = shapes.length;
shapes[i].drag(move, dragger, up); texts[i].drag(move, dragger, up); };
}; //endcreaterect
document.getElementById("image").onclick = function () { createRect(CRX, CRY); Select(); changeC();
};

здесь я создаю , с помощью библиотеки Raphael прямоугольники при нажатии на картинку "image".
как мне определить, по какому прямоугольнику я делаю клик?

с помощью функции Select(), я вызиваю alert на клик по элементу, но вызивается только последний alert. Что тогда мне делать?

var Select = function () {
for (x in array) { joptarray.push(shapes[x]);
if (shapes[x]) { shapes[x].click(function () { selected = shapes[x]; if (selected == shapes[x]) { alert("shape" + x);
}; }); };
}; };

холст создается в однов диве "element":

var div = document.createElement("div"); div.id = "element"; document.body.appendChild(div); ... r = Raphael(document.getElementById("element"));

там и следует перехвачивать клик для каждого созданого прямоугольника. наперед мы не знаем сколько елементов будет создано.

#javascript

Комментарии (5)
benzin 03.07.2012 22:27

Если массив shapes содержит ссылки на созданные элементы.

function Select()
{
for (var i=0; i<shapes.length; i++)
{
shapes[i].onclick = function ()
{
alert("shape" + i);
}
}
}

У вас очень странный для меня код, все переменные глобальные и их очень много, это не есть хорошо.

Вообщем перебираем массив ссылок на элементы и вешаем на каждый событие onclick.
+2
begin29 03.07.2012 23:53

да, но когда я так делаю, при клике на каком нибудь из созданых shapes визывается alert только для последнего. как мне можно повешать onclick для каждого элемента?
+2
grom 04.07.2012 12:54

shape = r.rect(x, y, 95, 25, 20);
shapes.push(shape);

for (i = 1; i < shapes.length; i++)

Меня смущает это. r.rect создает один элемент? Значит длинна массива shapes единица. И ваш цикл прокручивается один раз.

У вас, что то не так с созданием элементов. Добейтесь сохраняйте где-то все созданные элементы нормального.

Или костыль:
var div = document.createElement("div");
div.id = "element";
document.body.appendChild(div);
...
r = Raphael(document.getElementById("element"));

var childs = document.getElementById("element").childNodes;

for(var i=0; i < childs.length; i++)
{
if(childs[i].nodeName.toLowerCase() == 'div')
{
childs[i].onclick = function ()
{
alert('child'+i);
}
}
}

+1
begin29 04.07.2012 21:45

после каждого клика вызывается функция createRect, поэтому длина shapes равна количеству созданых элементов:

document.getElementById("image").onclick = function () {
createRect(CRX, CRY);
...
}

+1
begin29 05.07.2012 23:20

Спасибо всем!!! Решыл: :dance:

z++;

shapes.push(r.rect(x, y, 95, 25, 20).attr({ fill: fcolor, stroke: scolor, "stroke-width": 2, cursor: "move" }).data("shape", z)
.click(function () {
alert(this.data("shape"));
}));

+1

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 13449]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 9220]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 8834]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 8161]
[124]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 6816]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 4939]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 4902]

Вести с Хабра