Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Понять по какому элементу был осуществлен клик (https://javascript.ru/forum/events/53030-ponyat-po-kakomu-ehlementu-byl-osushhestvlen-klik.html)

zhurchik 18.01.2015 13:12

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

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

P.S. у блока может быть только один атрибут и это class="play", такие как onclick и прочие не применимы в данной ситуации.

Safort 18.01.2015 13:26

Как-то так
<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>

ruslan_mart 18.01.2015 13:28

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


Вы про это?

zhurchik 18.01.2015 13:35

Safort,
Спасибо большое!
А такой подход во многих браузерах будет работать?

ruslan_mart 18.01.2015 13:37

zhurchik,

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

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

Vlasenko Fedor 18.01.2015 13:40

<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>

разбирайся с примером :)

Safort 18.01.2015 13:48

zhurchik,
во всех современных и не очень) Но лучше добавить || window.event.srcElement; как предложил Ruslan_xDD или использовать jQuery.

Vlasenko Fedor 18.01.2015 13:51

Ruslan_xDD,
Цитата:

Сообщение от Ruslan_xDD
var target = e || window.event.srcElement;

?
Safort,
Цитата:

Сообщение от Safort
или использовать jQuery.

Для того, чтобы навесить событие на элемент включать библиотеку?

ruslan_mart 18.01.2015 13:55

Если jQuery на сайте уже подключена, то можно делегирование обойтись.

Safort 18.01.2015 15:09

Poznakomlus,
Цитата:

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


Часовой пояс GMT +3, время: 05:04.