Суть такая, есть блок (контейнер), внутри него есть 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>
