WedX - журнал о программировании и компьютерных науках

Событие фокуса JQuery 1.7.2 всегда появляется перед событием размытия в одном и том же селекторе

Я сделал некоторый код, чтобы ограничить навигацию по вкладкам для некоторых элементов по моему выбору. Вы можете увидеть полный рабочий код здесь: https://jsfiddle.net/M2ELL/2/ это работает нормально.

Дело в том, что я хочу «украсить» родительский div, на котором находится фокус. В этом отношении я сделал эти прослушиватели событий:

$('[data-mymodaltabindex]').blur(function () {        
   $(this).parent().removeClass('highlight');
   console.log('blur ' + $(this));
});

$('[data-mymodaltabindex]').focus(function () {
   $(this).parent().addClass('highlight');
   console.log('highlight ' + $(this));
});

Они работают, как и ожидалось, когда есть только один вход для каждого родительского div. С другой стороны, когда есть два входа для каждого родительского div (например, два радиоприемника в моем примере), событие фокуса всегда происходит перед событием размытия. Результатом является выделение, а затем удаление выделения на div, что противоположно тому, что я хочу.

Я хотел бы, чтобы событие размытия произошло до того, как будет удалено выделение, а затем выделение. Как я могу этого добиться? Почему в этом случае событие фокуса всегда происходит перед событием размытия?

Полный код:

<div>
    radio 1
    <input type="radio" data-mymodaltabindex="1" />
    radio 2
    <input type="radio" data-mymodaltabindex="2" />
</div>
<div>
    text
    <input type="text" data-mymodaltabindex="3" />
</div>

$('[data-mymodaltabindex]').on('keydown', function (e) {
    if (e.keyCode == 9 || e.which == 9) {
        // define variables
        var mytabindex = null;
        var maximum = null;
        var minimum = null;
        var next = null;
        var previous = null;
        var values = new Array();
        // set mytabindex on the actual focused control
        var mytabindex = $(this).attr('data-mymodaltabindex');
        // put every visible mytabindex into array
        $('[data-mymodaltabindex]:visible').each(function () {
            values.push(parseInt($(this).attr('data-mymodaltabindex')));
        });
        //console.log(values);
        // look for maximum minimum mytabindex 
        // for maximum and minimum we filter out null values 
        // as they are interpreted as 0 with math functions
        maximum = Math.max.apply(null, values.filter(function (val) { return val !== null }));
        minimum = Math.min.apply(null, values.filter(function (val) { return val !== null }));
        // set next and previous using function
        next = getModalClosestHighValue(values, mytabindex);
        previous = getModalClosestLowValue(values, mytabindex);
        // go back to begining / end if 
        // end / begining is reached
        if (!previous) { previous = maximum; }
        if (!next) { next = minimum; }
        // check if there is shift combination
        if (e.shiftKey) {
            mytabindex = previous; // focus on the previous item
        } else {
            mytabindex = next; // focus on the next item
        }
        // focus on this element
        $('[data-mymodaltabindex=' + mytabindex + ']').focus();
        console.log('focus set to [data-mymodaltabindex=' + mytabindex + ']');
        // stop propagation
        return false;
    }
});

function getModalClosestHighValue(a, x) {
    var hi;
    for (var i = a.length; i--; ) {
        if (a[i] > x && (hi === undefined || hi > a[i])) hi = a[i];
    };
    return hi;
}

function getModalClosestLowValue(a, x) {
    var lo;
    for (var i = a.length; i--; ) {
        if (a[i] < x && (lo === undefined || lo < a[i])) lo = a[i];
    };
    return lo;
}
23.01.2013

  • Я не могу воспроизвести вашу проблему в Chrome/linux или Firefox/linux: jsfiddle.net/7mfLb 23.01.2013
  • В каком браузере у вас проблема? 23.01.2013
  • Версия Jquery отличается... в вашей скрипке вы используете 1.9, в моей - 1.72. 23.01.2013
  • Итак... Я бы предложил обновить ваш jQuery :) 23.01.2013
  • Я только что попробовал, но не могу, это слишком сложно со всеми зависимостями с другими модулями. Я должен заставить его работать с этой версией 23.01.2013

Ответы:


1

Оказывается, это ошибка некоторых версий jQuery, которую можно решить с помощью jQuery 1.9.

Работает с 1.9: https://jsfiddle.net/7mfLb/

Не работает с 1.8.3: https://jsfiddle.net/dHwE5/


Если вы хотите, чтобы это работало с 1.7.2, я предлагаю вам этот обходной путь:

$('[data-mymodaltabindex]').on('blur focus', function() {
   var $p = $(this).parent();
   $p.removeClass('highlight');
   setTimeout(function() {
      $('div :has(:focus)', $p.parent()).addClass('highlight');
   }, 0);
});

Демонстрация

23.01.2013
  • еще раз спасибо, но, как я уже сказал, я должен заставить его работать с 1.72 23.01.2013
  • Почему ? У вас действительно есть зависимости от этой версии? Опасно оставаться привязанным к старой версии. Вашим приоритетом должно быть решение этих (глючных) зависимостей. 23.01.2013
  • Я использую плагин jquery-validate.js, который вызывает ошибки, когда я пытаюсь использовать 1.9. 23.01.2013
  • О, спасибо, но все равно это не сработает, ваш код больше не выделяется: jsfiddle.net/M2ELL/4 23.01.2013
  • @ Arno2501 Arno2501 Вы пробовали скрипку, на которую я ссылался? 23.01.2013
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]