Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.06.2018, 18:07
Интересующийся
Отправить личное сообщение для Voroshek Посмотреть профиль Найти все сообщения от Voroshek
 
Регистрация: 04.12.2014
Сообщений: 11

Получить id элемента по клику, но немного хитро
Здравствуйте.
Программку делаю для себя поэтому желательно засунуть всё в жо один файл. Ячейки таблицы содержат SVG-изображения. Кликом по ячейке нужно получать id ячейки, но возвращает XML-примитив.
Можно это как-то разрулить?

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <style>
      table {
        position: absolute;
      }
      td {
        border: black 1px solid;
        width: 70px;
        height: 70px;
      }
      #right {
        border-collapse: collapse;
        right: 2em;
      }
    </style>
    <script>
      var arr_img = ["<svg\nxmlns:dc=\"http://purl.org/dc/elements/1.1/\"\nxmlns:cc=\"http://creativecommons.org/ns#\"\nxmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\nxmlns:svg=\"http://www.w3.org/2000/svg\"\nxmlns=\"http://www.w3.org/2000/svg\"\nxmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"\nxmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\nwidth=\"70\"\nheight=\"70\"\nviewBox=\"0070.00000170.000001\"\nid=\"svg4187\"\nversion=\"1.1\"\ninkscape:version=\"0.91r13725\"\nsodipodi:docname=\"cog_1.svg\">\n<defs\nid=\"defs4189\"/>\n<sodipodi:namedview\nid=\"base\"\npagecolor=\"#ffffff\"\nbordercolor=\"#666666\"\nborderopacity=\"1.0\"\ninkscape:pageopacity=\"0.0\"\ninkscape:pageshadow=\"2\"\ninkscape:zoom=\"5.6\"\ninkscape:cx=\"4.2210775\"\ninkscape:cy=\"28.778878\"\ninkscape:document-units=\"px\"\ninkscape:current-layer=\"layer1\"\nshowgrid=\"false\"\nunits=\"px\"\ninkscape:window-width=\"1366\"\ninkscape:window-height=\"733\"\ninkscape:window-x=\"0\"\ninkscape:window-y=\"0\"\ninkscape:window-maximized=\"1\"/>\n<metadata\nid=\"metadata4192\">\n<rdf:RDF>\n<cc:Work\nrdf:about=\"\">\n<dc:format>image/svg+xml</dc:format>\n<dc:type\nrdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/>\n<dc:title></dc:title>\n</cc:Work>\n</rdf:RDF>\n</metadata>\n<g\ninkscape:label=\"Layer1\"\ninkscape:groupmode=\"layer\"\nid=\"layer1\"\ntransform=\"translate(0,-982.36216)\">\n<rect\nstyle=\"opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"\nid=\"rect4195\"\nwidth=\"70.178574\"\nheight=\"70.178574\"\nx=\"0\"\ny=\"982.36218\"/>\n</g>\n</svg>"];
      document.onclick = function(event) {
        event = event || window.event;
        if (!event.target) {
          event.target = event.srcElement;
        }
        alert(event.target.id);
      }
      function main() {
        for (var i=0; i<arr_img.length; i++) {
          var el = document.getElementById(31+i);
          el.innerHTML = arr_img[i];
        }
      }
    </script>
  </head>

  <body onload="main()">

    <table id="right">
      <tr>
        <td id=31></td><td id=32></td><td id=33></td><td id=34></td><td id=35></td><td id=36></td>
      </tr>
    </table>
  </body>
</html>

Последний раз редактировалось Voroshek, 23.06.2018 в 18:19.
Ответить с цитированием
  #2 (permalink)  
Старый 23.06.2018, 18:17
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,589

Вручную.
function getTD(element){
  while(element && element.tagName !== 'TD') 
    element = element.parentNode;
  return element
}

var target = event.target;
if(target = getTD(element))
  alert(target.id);
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 23.06.2018, 18:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Voroshek,
дочитать до конца
https://learn.javascript.ru/event-delegation
Ответить с цитированием
  #4 (permalink)  
Старый 23.06.2018, 18:49
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,012

https://developer.mozilla.org/ru/doc...lement/closest
Ответить с цитированием
  #5 (permalink)  
Старый 23.06.2018, 18:54
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,589

Alexandroppolus, мы всегда ограниченны осликом...
Voroshek, кстати, танцы с window.event и event.srcElement можно смело убирать, они нужны только для древнего осла, а тот всё равно svg не умеет как таковой.)
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 23.06.2018, 18:56
Интересующийся
Отправить личное сообщение для Voroshek Посмотреть профиль Найти все сообщения от Voroshek
 
Регистрация: 04.12.2014
Сообщений: 11

Спасибо всем, воспользовался статьёй по ссылке рони.
Однако, for great the справедливости на table событие не вешается, только на document.
Тем не менее, всё заработало.
Ответить с цитированием
  #7 (permalink)  
Старый 23.06.2018, 18:57
Интересующийся
Отправить личное сообщение для Voroshek Посмотреть профиль Найти все сообщения от Voroshek
 
Регистрация: 04.12.2014
Сообщений: 11

Написано, что это экспериментальная технология. Благодарю, на будущее буду знать.
Ответить с цитированием
  #8 (permalink)  
Старый 23.06.2018, 18:59
Интересующийся
Отправить личное сообщение для Voroshek Посмотреть профиль Найти все сообщения от Voroshek
 
Регистрация: 04.12.2014
Сообщений: 11

Танцы убрал. Мы не ограниченный осликом, у нас гуглохром и мы даже имеем купзилла!
Ответить с цитированием
  #9 (permalink)  
Старый 23.06.2018, 19:01
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,012

Клосест почти везде есть, и скоро перестанет быть экспериментальным. Так что полифилл для ИЕ, и можно юзать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить значение по клику Moze Общие вопросы Javascript 4 14.11.2016 13:24
как по клику на кнопку получить отмеченный объект pirat9629 ExtJS 0 19.08.2014 11:49
Как получить ID брошенного элемента методом drop? evgenyan jQuery 6 11.10.2010 14:22
Получить id элемента, вызвавшего событие. Mutagena jQuery 2 19.03.2010 10:16
Как получить значение следующего элемента? _mouse_ Общие вопросы Javascript 4 25.02.2010 11:37