Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2015, 14:12
Кандидат Javascript-наук
Отправить личное сообщение для zhurchik Посмотреть профиль Найти все сообщения от zhurchik
 
Регистрация: 04.06.2011
Сообщений: 116

Понять по какому элементу был осуществлен клик
Друзья, какой самый простой способ узнать по какому блоку в DOM дереве был осуществлен клик?
К примеру:
в блоке div имеется 20 других блоков div и у всех этих блоков один и тот же класс class="play" и если пользователь кликнул по блоку, например, 17 как понять что он кликнул именно по нему? Как получить ссылку на блок (объект) 17?

Заранее огромное спасибо.
Готов получить пенок, который указывает куда копать.

P.S. у блока может быть только один атрибут и это class="play", такие как onclick и прочие не применимы в данной ситуации.
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2015, 14:26
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Как-то так
<div id="q1">elem 1</div>
<div id="q2">elem 2</div>
<div id="q3">elem 3</div>
<div id="q4">elem 4</div>
<div id="q5">elem 5</div>
<div id="q6">elem 6</div>
<script>
  document.onclick = function(e) {
    alert(e.target.id);
  };
</script>

Последний раз редактировалось Safort, 18.01.2015 в 14:31.
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2015, 14:28
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

<div class="test">
    <div class="play">A</div>
    <div class="play">B</div>
    <div class="play">C</div>
</div>



document.querySelector('.test').onclick = function(e) {
    var index = [].slice.call(this.children).indexOf(e.target);
    alert( index );
};


Вы про это?
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2015, 14:35
Кандидат Javascript-наук
Отправить личное сообщение для zhurchik Посмотреть профиль Найти все сообщения от zhurchik
 
Регистрация: 04.06.2011
Сообщений: 116

Safort,
Спасибо большое!
А такой подход во многих браузерах будет работать?
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2015, 14:37
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

zhurchik,

Вот такой, да:

myElem.onclick = function(e) {
    var target = e.target || window.event.srcElement;
};

Последний раз редактировалось ruslan_mart, 18.01.2015 в 14:49.
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2015, 14:40
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<div id="test">
  <div>0</div>
  <div class="play">1</div>
  <div class="play">2</div>
  <div class="play">3</div>
  <div class="play">4</div>
  <div class="play">5</div>
</div>
<script>
  window.onload = function () {
    test.onclick = function (e) {
      var el = e ? e.target : window.event.srcElement;
      while (el !== this) {
        if (el.className == "play") {
          alert(el.innerHTML);
          break;
        }
        el = el.parentNode;
      }
    };
  };
</script>

разбирайся с примером
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2015, 14:48
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

zhurchik,
во всех современных и не очень) Но лучше добавить || window.event.srcElement; как предложил Ruslan_xDD или использовать jQuery.
Ответить с цитированием
  #8 (permalink)  
Старый 18.01.2015, 14:51
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Ruslan_xDD,
Сообщение от Ruslan_xDD
var target = e || window.event.srcElement;
?
Safort,
Сообщение от Safort
или использовать jQuery.
Для того, чтобы навесить событие на элемент включать библиотеку?

Последний раз редактировалось Vlasenko Fedor, 18.01.2015 в 14:54.
Ответить с цитированием
  #9 (permalink)  
Старый 18.01.2015, 14:55
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Если jQuery на сайте уже подключена, то можно делегирование обойтись.
Ответить с цитированием
  #10 (permalink)  
Старый 18.01.2015, 16:09
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Poznakomlus,
Цитата:
Для того, чтобы навесить событие на элемент включать библиотеку?
Это просто один из вариантов.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Клик по элементу на странице в рамках координат ipatrool Элементы интерфейса 17 10.10.2014 17:40
Был ли клик в определенном элементе? Dimaz Events/DOM/Window 1 19.07.2014 19:30
Клик по элементу Джон Доу jQuery 2 09.12.2013 11:39
Как понять, какому объекту принадлежит свойство? Елена-Котяра Events/DOM/Window 1 16.02.2012 02:19
Клик по другому элементу (id) Nivans Элементы интерфейса 1 11.10.2010 07:34