Как узнать позицию элемента, на который нажали?

Question

[eugene_d_dev]

Допустим есть родительский блок. В нем еще 5 блоков. Вот нужно получить номер позиции дочернего элемента, на который нажали мышкой. Чистый javascript.

Answer 1

[GreatRash]

1. получить родителя
2. получить всех его чилдов
3. пробежать циклом по ним, сравнивая не похож ли чилд на event.target
4. если похож, то вернуть итератор

Comments

[eugene_d_dev]

Самое простое и самое действенное))

Answer 2

[Виталий Инчин ☢]

Решением был отмечен велосипед, прискорбно.

roditel.addEventListener("click", function(event){
   [].indexOf.call(this.children, event.target);
});

Живой пример от Stalker_RED: ---» тут

Comments

[eugene_d_dev]

можно немного подробнее. Я не совсем понимаю данный синтаксис. Особенно пустой айдишник в начале

[Виталий Инчин ☢]

fajjet: если уклоняться от разжеванного ответа, то мы добавляем псевдомассиву this.children метод массивов indexOf. Потом вызываем его, просим найти индекс кликнутого элемента в списке детей родительского блока.

[Stalker_RED]

Виталий Инчин: [] вместо Array.prototype? круто.
собрал демку https://jsfiddle.net/Stalk/jvo7mzwr/

Answer 3

[Ken Jee]

Во время генерации блоков назначайте им какой-нибудь придуманный аттрибут, например myattr="номер позиции" и просто возьмите его значение при обработке.

Comments

[Виталий Инчин ☢]

А давно так можно?

[Stalker_RED]

Виталий Инчин: Всегда. DOM-элементам можно добавлять свои свойства, методы и т.п. Как и к почти всем другим объектам в javascript. Разве что в XHTML были какие-то ограничения. Но ваш вариант лучше, имхо.

[Виталий Инчин ☢]

Stalker_RED: я не про свойства, а про как попало названные атрибуты.

[Stalker_RED]

Виталий Инчин: в большинстве браузеров можно. https://jsfiddle.net/Stalk/6x098ro6/
Возможно с "всегда" я загнул, но примерно со времен ие6, а то и раньше.
Т.е. как можно - валидатор вероятно будет ругаться, но браузер от этих левых свойств не упадет, и к ним можно достучаться через js.

[Виталий Инчин ☢]

Stalker_RED: в том то и дело, что валидатор ругается на них и "можно" то оно можно, как и пользовательские теги, но для кого тогда стандарты? Для кого data-атрибуты?

[Stalker_RED]

Виталий Инчин: Можно так, чтобы не ругался stackoverflow.com/questions/992115/custom-attribut...
Но я согласен, в большинстве случаев хватает возможности data-*
А в данном примере они вообще не нужны.

Answer 4

[Super User]

Если используется jQuery, то есть встроенный метод index().
P.S. Невнимательно читал вопрос, сорри.