Используя JavaScript, как вы можете определить, что пользователь вкладывает назад?

Question

У меня есть ссылка HTML, и я хочу предпринять некоторые действия, когда пользователь уходит от нее, но только если пользователь перемещается по документу вперед, а не назад.

Существует ли надежный кросс-браузерный способ определения того, каким образом пользователь вкладывает документ в документ, или, действительно, он вообще просматривает документ? Я привязан к событию blur, но это не обязательно означает, что пользователь вкладывает.

Я посмотрел на проверку значения document.activeElement или атрибута hasFocus предыдущего фокусируемого элемента в источнике, но:

1. они кажутся сравнительно недавними дополнениями и, следовательно, не могут быть широко поддержаны, и
2. Я не уверен, что их можно будет проверить, когда сработает событие blur, даже если пользователь вкладывает вкладку, я не думаю, что следующий элемент будет сфокусирован.

Answer 1

Вам нужно обработать событие keydown для самой ссылки.

$("your link selector").keydown(function(evt){
    if (evt.which === 9)
    {
        if(evt.shiftKey === true)
        {
            // user is tabbing backward
        }
        else
        {
            // User is tabbing forward
        }
    }
});

Проверьте это Пример JSFiddle , который обнаруживает переходы вперед и назад по определенной ссылке.

Sidenote : Вы не указали тег jQuery в своем вопросе, хотя я предоставил код jQuery в своем ответе.Поскольку у вас есть как Javascript, так и значки jQuery, я полагаю, вам будет просто преобразовать мой код в чистый Javascript.

Answer 2

В качестве альтернативы хорошему решению от Роберта, может быть, вы можете использовать атрибут tabindex ? Установите его для ваших ссылок HTML и других «вкладок» элементов. Затем проверьте это в JavaScript.

Решение с tabindex: jsfiddle

Побочный эффект : Элементы также будут реагировать на щелчки мыши. Они будут вести себя правильно. Так что это может быть хорошим или плохим побочным эффектом в зависимости от ваших потребностей.