Подтвердить что ты не робот

Есть ли способ использовать event.preventDefault с focusOut? Если нет, то почему?

Я хотел бы предотвратить событие по умолчанию из события focusOut (или blur) и сохранить фокус в определенном поле ввода.

Это то, что я уже пробовал:

  • с помощью event.preventDefault() в начале и в конце функции (для целей тестирования, а не для стиля)

  • return false;, чтобы предотвратить распространение

  • настройка фокуса обратно на элемент непосредственно в элементе (но я обнаружил, что фокус все еще переключается, поскольку переключатель фокуса выполняется после выполнения функции .on(). Я знаю, что могу использовать setTimeout, но Id хотел бы избежать этого и выяснить суть проблемы.)

  • используя blur вместо focusOut

Мой код:

    _triggerEventHide: function(inst, eventType) {
        inst.$target.on(eventType, function(event) {
            event.preventDefault();
            if (!$.suggestBox.$divCont.hasClass($.suggestBox.mouseOverClassName)) {
                $.suggestBox.$divCont.css({display: 'none'});   //reposition Suggestbox
            } else {
                inst.target.focus(); 
            }
            event.preventDefault();
            return false;
        });
     }

Обратите внимание, что $target представляет элемент, обернутый jQuery, и target представляет собственный элемент DOM.

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

Я ценю любое время, знания и решения (включая попытки) в этом вопросе. Мне бы очень хотелось узнать...

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

4b9b3361

Ответ 1

После еще нескольких исследований выяснилось, что только определенные события "отменены".

  • Цитата из http://help.dottoro.com/ljwolcsp.php

    Вы можете проверить, может ли событие быть отменено с помощью свойства cancelable во всех браузерах, за исключением Internet Explorer до версии 9. Хотя свойство cancelable существует в Firefox, оно всегда возвращает true, независимо от состояния отмены события. Невозможно определить, может ли событие быть отменено в Internet Explorer до версии 9.

    Обратите внимание, что использование метода preventDefault и свойства returnValue в событии без отмены не вызывает ошибки. Когда обработчик события возвращает false, событие будет отменено. Вы можете использовать его вместо метода preventDefault и свойства returnValue. См. Пример 2 ниже.

  • Каждое событие в Javascript имеет свойство cancelable, которое определяется как "true", если событие можно предотвратить или "false", если событие не может быть отменено. Ссылка: http://help.dottoro.com/ljeosnqv.php

  • Пример script из http://help.dottoro.com/ljeosnqv.php, демонстрирующий это свойство, можно найти здесь на jsFiddle (для экономии места). Обратите внимание на комментарии в коде о том, как Firefox всегда возвращает true для свойства cancelable в объекте события.

Общий принцип:

 $('selector').on(eventType, function (event) {
    alert(('cancelable' in event));   //will return true
    alert(event.cancelable);      //will return true if event can be cancelled
                                  //NOTE: Firefox mistakenly always returns true
});
  • События имеют предустановленный порядок в зависимости от ситуации. Например, если щелкнуть по кнопке мыши, порядок событийTriggers будет выглядеть: mousedown, mouseup и click. Ссылка: www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-initMouseEvent

  • Цитата из http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-flow-cancelation

    A "cancelable event" - событие, связанное с действием по умолчанию, которое разрешено отменять во время потока событий DOM. На любой фазе во время потока событий активированные прослушиватели событий могут отменить действие по умолчанию или разрешить действие по умолчанию. В случае гиперссылки в браузере отмена действия приведет к неактивизации гиперссылки. Не все события, определенные в этой спецификации, являются отменными событиями.

  • Иногда в последовательности событий происходит, что действие по умолчанию DOM будет происходить до того, как событие, которое вы хотите отменить, даже появляется, в этих случаях вы не можете отменить действие по умолчанию, потому что оно уже произошло. То есть, действие по умолчанию происходит перед отправкой события.


МОЕ РЕШЕНИЕ:

Говоря, что мне удалось найти решение моей проблемы и решить эту проблему еще больше/меньше. По сути, у меня уже был eventListener с элементом для focusin, и я хотел, чтобы этот элемент сохранял фокус.

<div id='display'></div>
$('#idBox').on('focusin', function () {
  $('#div').append('focused');
  //do something
}

Изначально я пытался использовать событие setTimeout, когда я нажал, но я обнаружил, что это не хорошо, потому что это вызвало мое событие focusin снова. Итак, нам нужно событие, которое отправляется перед действием DOM по умолчанию переключения фокуса. Я обнаружил, что есть событие, отвечающее этому требованию, но доступное только для IE... типичное. Для вашей информации это: "onbeforedeactivate" , и отменяется. Однако, поскольку кросс-браузерная совместимость важна, мы не должны использовать этот eventTrigger. Скорее я обнаружил, что событие mousedown происходит до того, как DOM начинает свое изменение с изменением поведения.

Итак, что мы можем сделать:

$(document).on('mousedown', function(event) { 
       target = event.target;     // the element clicked on
       myTarget = document.getElementById("idBox");   // the element to keep focus
       if (target !== myTarget) {   
           event.preventDefault();  //prevent default DOM action
           event.stopPropagation();   //stop bubbling
           return false;   // return
       }
});

Есть много других способов обойти это. Мне лично не нравится устанавливать eventListener для всего документа, но для демонстрации основ он служит своей цели.


Сноска: Большая статья, чтобы прочитать, чтобы узнать больше об обработке событий в Javascript, http://help.dottoro.com/ljtdqwlx.php Удивительный ресурс, на который я наткнулся.

Ответ 2

Мы знаем, что причиной этого является функция щелчка. Поэтому в обычном проводнике, таком как хром, вы можете определить событие mousedown, а затем предотвратитьDefault.

Но это не работает в ie, но мы можем использовать событие beforedeactivate вместо http://msdn.microsoft.com/en-us/library/windows/apps/jj569321.aspx. Его можно отследить, т.е. когда фокус меняется. поэтому просто предохраняйте его.

код хотел бы:

       $inp.on('blur', function(){

            self.hide();
        });

        isIE && $inp.on('beforedeactivate', function(evt){
            mousedown && evt.preventDefault();
        });

        $holder.on('mousedown', function(evt){
            evt.preventDefault();
            mousedown = 1;
        });

Ответ 3

inst.$target.on("blur", function() {
     if (!$.suggestBox.$divCont.hasClass($.suggestBox.mouseOverClassName)) {
        $.suggestBox.$divCont.css({'display': 'none'});   //reposition Suggestbox
        return true;
        } 
      inst.target.focus();
      return false;
         });

нужно посмотреть ваш html. Я не думаю, что вы правильно назовете EX:

$.suggestBox Я думаю, должен быть $(".suggestBox"), но я не могу сказать, не видя вашего htnl