[Lemme]

Суть такая, есть блок (контейнер), внутри него есть n блоков, так вот, по клику на контейнер в любом месте, нужно получить подходящий элемент.

структура примерно такая:

---------------------------
 | 0 | | 1 | | 2 | | 3 |
---------------------------

Решил я это такм способом.

[].filter.call(this.children, function(item) {
     return item.getBoundingClientRect().left <= event.clientX;
}).pop();

Собственно, код работает, но, что-то мне подсказывает, что хоть способ и рабочий, фильтровать массив и вытаскивать с него последний элемент не лучший способ..

Есть у кого-то идеи?

Вот полный код.

<style>
	div {
	  display: flex;
	  justify-content: space-between;
	  padding: 30px;
	  background-color: #fff;
	  border: 1px solid #999;
	  cursor: pointer;
	}

	span {
	  width: 100px;
	  height: 100px;
	  background-color: tomato;
	  color: #fff;
	  text-align: center;
	  font-size: 80px;
	  -moz-user-select: none; /* fucking double click :D */
	}
</style>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<script>
	'use strict';

	const div = document.querySelector('div');

	div.addEventListener('click', handleClick);

	function getPos(item) {
		return item.getBoundingClientRect().left;
	}

	function handleClick(e) {
		const items = Array.from(this.children);
	  
	  const filtredItems = items.filter(item => 
	  	item.getBoundingClientRect().left <= e.clientX
	  );
	  
	  const item = filtredItems.pop() || items[0];
	  
	  // clear items
	  items.forEach(item => {
	  	item.innerHTML = '';
	  });
	  
	  // active item
	  item.innerHTML = '+';
	}
</script>