Понять по какому элементу был осуществлен клик
Друзья, какой самый простой способ узнать по какому блоку в DOM дереве был осуществлен клик?
К примеру: в блоке div имеется 20 других блоков div и у всех этих блоков один и тот же класс class="play" и если пользователь кликнул по блоку, например, 17 как понять что он кликнул именно по нему? Как получить ссылку на блок (объект) 17? Заранее огромное спасибо. Готов получить пенок, который указывает куда копать. P.S. у блока может быть только один атрибут и это class="play", такие как onclick и прочие не применимы в данной ситуации. |
Как-то так
<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> |
<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 ); }; Вы про это? |
Safort,
Спасибо большое! А такой подход во многих браузерах будет работать? |
zhurchik,
Вот такой, да: myElem.onclick = function(e) { var target = e.target || window.event.srcElement; }; |
<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> разбирайся с примером :) |
zhurchik,
во всех современных и не очень) Но лучше добавить || window.event.srcElement; как предложил Ruslan_xDD или использовать jQuery. |
Ruslan_xDD,
Цитата:
Safort, Цитата:
|
Если jQuery на сайте уже подключена, то можно делегирование обойтись.
|
Poznakomlus,
Цитата:
|
Часовой пояс GMT +3, время: 03:22. |