Получить дочерний элемент по координатам клика.
Суть такая, есть блок (контейнер), внутри него есть 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>
|
Lemme,
решение http://javascript.ru/forum/misc/6102...tml#post405988 ... чуть добавить фильтр |
рони, спасибо, интересно=)
|
Через offsetLeft никак? А потом через array.some найти нужный. Будет работать быстрее, т.к. не придется по всем элементам массива бегать.
var x = e.clientX;
var span = document.querySelectorAll('span');
var temp = span[0];
[].some.call(span, function (elem) {
if (elem.offsetLeft > x) {
return true;
}
temp = elem;
})
|
Ближайший элемент от места клика
Lemme,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<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>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var b = document.querySelector("div"),
d = b.querySelectorAll("span"),
c;
b.addEventListener("click", function(b) {
c = [].map.call(d, function(a) {
var e = a.getBoundingClientRect(),
c = e.left + a.offsetWidth / 2 - b.clientX;
a = e.top + a.offsetHeight / 2 - b.clientY;
return Math.sqrt(c * c + a * a)
});
var f = Math.min.apply(null, c);
[].forEach.call(d, function(a, b) {
a.innerHTML = c[b] > f ? "" : "+"
})
})
});
</script>
</body>
</html>
|
<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>
var div = document.querySelector('div');
div.addEventListener('click', function (e) {
var x = e.clientX;
var span = document.querySelectorAll('span');
var temp = span[0];
[].some.call(span, function (elem, i) {
if (elem.offsetLeft > x) {
return true;
}
temp = elem;
});
[].forEach.call(span,function(elem){
(elem == temp) ? elem.innerHTML = '+' : elem.innerHTML = '';
})
})
</script>
|
Lemme,
вопрос только - можно кликнуть так что минимальное растояние будет одинаковое для нескольких элементов, тогда как? |
destus,
не работает если брать минимальное растояние -- ваш вариант для ближайшего слева |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:15. |