1
<!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;
2
  • 3
    Читайте learn.javascript.ru/bitwise-operators
    – Visman
    20 июл 2016 в 17:11
  • 1
    Если вам дан исчерпывающий ответ, отметьте его как верный (галочка напротив выбранного ответа).
    – Mihanik71
    20 июл 2016 в 18:25

2 ответа 2

6

Читаем описание функции compareDocumentPosition:

nodeA.compareDocumentPosition(nodeB);

Возвращаемое значение – битовая маска, биты в которой означают следующее:

000100  4   nodeA предшествует nodeB

Далее, & в JavaScript - "побитовое И", а x & 4 вернёт ненулевое значение, если третий бит в x установлен, т.е. если

nodeA предшествует nodeB

Таким образом, код

var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;

помещает в переменную isLastClickedBefore ненулевое значение тогда и только тогда, когда startElem предшествует элементу target.

2

Строка позволяет узнать в каком направлении нужно перебирать элементы для того чтобы выбрать все которые были между предыдущим выбранным и текущим.

Происходит проверка какой элемент находится выше в DOM дереве тот на который нажали или тот который был активен до этого.

Получается что если был выбран самый нижний и мы выделяем тот который выше, то мы идём вверх по всем элементам и выделяем элементы между ними.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.