<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.selected {
background: #0f0;
}
li {
cursor: pointer;
}
</style>
</head>
<body>
Клик на элементе выделяет только его.
<br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
<br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
<br>
<ul>
<li>Кристофер Робин</li>
<li>Винни-Пух</li>
<li>Ослик Иа</li>
<li>Мудрая Сова</li>
<li>Кролик. Просто кролик.</li>
</ul>
<script>
var ul = document.querySelector('ul');// получили весь список
var lastClickedLi = null;
// --- обработчики ---
ul.onclick = function(event) {
var target = event.target;
// возможно, клик был внутри списка UL, но вне элементов LI
if (target.tagName != "LI") return;
// для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
if (event.metaKey || event.ctrlKey) {
toggleSelect(target);
} else if (event.shiftKey) {
selectFromLast(target);
} else {
selectSingle(target);
}
lastClickedLi = target;
};
ul.onmousedown = function() {
return false;
};
// --- функции для выделения ---
function toggleSelect(li) {
li.classList.toggle('selected');
}
function selectFromLast(target) {
var startElem = lastClickedLi || ul.children[0];
var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;
if (isLastClickedBefore) {
for (var elem = startElem; elem != target; elem = elem.nextElementSibling) {
elem.classList.add('selected');
}
} else {
for (var elem = startElem; elem != target; elem = elem.previousElementSibling) {
elem.classList.add('selected');
}
}
elem.classList.add('selected');
}
function deselectAll() {
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].classList.remove('selected');
}
}
function selectSingle(li) {
deselectAll();
li.classList.add('selected');
}
</script>
</body>
</html>
Интересует эта строка, зачем здесь "4"????
var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;