Предотвратить событие по умолчанию для jQuery keydown в Firefox - PullRequest
Новая
       26

Предотвратить событие по умолчанию для jQuery keydown в Firefox

5 голосов
/ 24 мая 2011

У меня есть код jQuery, который создает массив фокусируемых элементов и связывает .keydown для стрелок влево и вправо, чтобы перемещаться по ним.В Chrome, IE и Safari, начиная с preventDefault() или заканчивая возвратом false (что технически я не хочу использовать, потому что мне не нужно stopPropagation()) предотвращает событие стрелок по умолчанию, но в Firefox этоне.

Как я могу также предотвратить действие по умолчанию в Firefox?

Вот код, который работает, как и ожидалось, за исключением Firefox, где событие по умолчанию запускается в дополнение к моему обратному вызову. 

$(function () {
    var focusables = $(":focusable");
    focusables.eq(0).focus();
    focusables.eq(0).select();
    focusables.each(function () {
        $(this).keydown(function (e) {
            if (e.which == '37') { // left-arrow
                e.preventDefault();
                var current = focusables.index(this),
                    next = focusables.eq(current - 1).length ? focusables.eq(current - 1) : focusables.eq(0);
                next.focus();
                next.select();
            }
            if (e.which == '39') { // right-arrow
                e.preventDefault();
                var current = focusables.index(this),
                    next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
                next.focus();
                next.select();
            }
        });
    });
});

Ответы [ 2 ]

7 голосов
/ 24 мая 2011

Событие нажатия клавиши - это событие, которое необходимо отменить, но Firefox в этом сценарии игнорирует warnDefault ().Поэтому решение состоит в том, чтобы размыть текущее раскрывающееся меню, позволить событию нажатия клавиши активировать документ и установить фокус на новое раскрывающееся меню с помощью тайм-аута. 

var focusables = $(":focusable");
focusables.eq(0).focus().select();
focusables.each(function () {
    $(this).keydown(function (e) {
        if (e.which == '37') { // left-arrow
            e.preventDefault();
            var current = focusables.index(this),
                next = focusables.eq(current - 1).length ? focusables.eq(current - 1) : focusables.eq(0);
            this.blur();
            setTimeout(function() { next.focus().select(); }, 50);
        }
        if (e.which == '39') { // right-arrow
            e.preventDefault();
            var current = focusables.index(this),
                next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
            this.blur();
            setTimeout(function() { next.focus().select(); }, 50);
        }
    });
});

Демонстрация при http://jsfiddle.net/roberkules/3vA53/

0 голосов
/ 24 мая 2011

Вы пробовали это? 

$(selector).click(function(event) {
   event.preventDefault();
});
...