Обработка события размытия родительского элемента, запускаемого фокусом на дочернем элементе и щелчком за пределами дочернего элемента

У меня есть "родительский div", содержащий входное поле дочернего type=number. Когда пользователь щелкает за пределами поля ввода, я использую событие blur или focusout родительского div, чтобы использовать входные значения в другом месте.

Мне также нужно использовать $('inputbox').trigger('focus') в каком-то месте, что нежелательно запускает событие размытия родительского div и запускает код для этого события.

Пожалуйста, дайте решение, чтобы остановить это родительское событие размытия в дочернем фокусе ИЛИ дать возможность определить, сделан ли фокус с помощью триггера ('focus') на дочернем элементе или путем щелчка пользователем за пределами родительского div.

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


javascript jquery onblur event-bubbling onfocus
person Umesh K.    schedule 19.01.2016    source источник
comment
Можете ли вы поделиться скрипкой jsfiddle.net?   -  person gurvinder372    schedule 19.01.2016
comment
См. Окончательный ответ.   -  person Umesh K.    schedule 19.01.2016

Ответы (4)


arrow_upward
2
arrow_downward

с помощью jquery вы можете очень легко создавать собственные события, например:

$('inputbox').trigger('special-focus');

то вы можете дождаться этого события, как и любое другое событие:

$('div').on('special-focus' , function(){ ... } );

это предотвратит вмешательство ваших событий во встроенные.

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

 .on('focus' , function(e){
    e.stopPropagation();
    e.preventDefault();
   /// the rest of your code ...
 });

это остановит распространение событий на родительские элементы

person Scott Selby    schedule 19.01.2016
comment
спасибо, но все же, если мне нужно использовать .focus (), чтобы сосредоточиться на поле ввода, и он запускает размытие родителя. - person Umesh K.; 19.01.2016
comment
отредактировал ответ, добавил еще одно решение, которое будет работать для вас - person Scott Selby; 19.01.2016
comment
вы можете присоединиться к событию щелчка, вы можете наполовину поиграть с тем, где поймать событие. - person Scott Selby; 19.01.2016
comment
Спасибо, Скотт ... Я опубликовал решение в качестве ответа. - person Umesh K.; 19.01.2016

arrow_upward
2
arrow_downward

Это сработало идеально для меня:

if (e.relatedTarget === null) ...
person Andres Cabrera    schedule 06.12.2018

arrow_upward
1
arrow_downward

У меня сработало проверка свойства relatedTarget объекта eventObject в функции-обработчике.

$("#parentDiv").focusout(function (eventObject) {
    if (eventObject.relatedTarget.id === "childInputId")
        /// childInput is getting focus
    else
        /// childInput is not getting focus
});
person Cody Stott    schedule 16.08.2016

arrow_upward
0
arrow_downward

.on('blur',...) родительского срабатывает перед .on('focus' ,...) дочерним.
В любом случае для родительского div, содержащего дочернее поле ввода, мы можем использовать
$('input').trigger('special-focus');
, а затем

  $("#form" ).on('special-focus', '.parentdiv' , function(event) {
          $("#form" ).off('blur', '.parentdiv');
          $(event.target).focus();
          $("#form" ).on('blur', '.parentdiv' , showValuesOnBlur);
     });


Теперь размытие родителя не срабатывает в фокусе ребенка.
У меня это сработало. то есть выключить и включить событие размытия родителя внутри специального фокуса.
Спасибо, Скотт Селби :)

person Umesh K.    schedule 19.01.2016
comment
Если вы не собираетесь выбирать мой ответ как правильный, то вы можете считать провайдера полным ответом на то, что вы сделали, чтобы этот код заработал. Кто-то другой, посетивший эту страницу, не поймет, что просто добавит там настраиваемое событие и не покажет, как оно было инициировано. - person Scott Selby; 19.01.2016
comment
.on ('focus', function (e) {e.stopPropagation (); и т. д. здесь не будет работать, так как сначала срабатывает родительское размытие .. также рабочий код содержит включение и отключение события размытия, поэтому я не пометил ваш ответ коррент mate, но все же было полезно предлагать вам настраиваемые события. Если бы я отметил это правильно, разработчик продолжил бы пробовать e.stopPropagation (); который здесь не работает. - person Umesh K.; 19.01.2016
comment
Я понял, это нормально, я просто хотел написать полный ответ, и я не говорил вам, что вы должны это делать, я не босс Stackoverflow, я просто говорил, что вам следует подумать. Под полным я не имел в виду, что мой был правильным, я просто хотел заполнить части, которые вы пропустили - person Scott Selby; 19.01.2016
comment
хорошо, приятель, также твой ответ дал сильное направление для работы. заметный. - person Umesh K.; 19.01.2016