Обработчик размытия jQuery не работает с элементом div?

Я не понимаю, почему обработчик размытия jQuery не работает в самом простом случае. Я буквально создаю div размером 100 на 100 пикселей и устанавливаю для него событие размытия, но оно не срабатывает (JSFiddle ):

<div id="test">this is a test</div>

$(document).ready(function() {
    $('#test').bind('blur', function() {
          alert('blur event!'); 
    });
});

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

Согласно документации jQuery:

В последних версиях браузеров домен события был расширен и теперь включает все типы элементов. Элемент может потерять фокус с помощью команд клавиатуры, таких как клавиша Tab, или щелчки мыши в другом месте страницы.

Я пробовал это в последних версиях Chrome и Firefox на Mac.


javascript jquery onblur
person jbyrd    schedule 24.09.2011    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Из спецификации событий W3C DOM :

фокус

Событие фокуса происходит, когда элемент получает фокус либо с помощью указывающего устройства, либо с помощью навигации по табуляции. Это событие действительно для следующих элементов: LABEL, INPUT, SELECT, TEXTAREA и BUTTON.

размытие

Событие размытия происходит, когда элемент теряет фокус либо через указывающее устройство, либо при переходе с помощью табуляции. Это событие действительно для следующих элементов: LABEL, INPUT, SELECT, TEXTAREA и BUTTON.

Браузеры состояний документации jQuery распространили события на другие элементы, что, как я предполагаю, означает, что blur и focus являются псевдонимами для более общего DOMFocusIn и DOMFocusOut события. Однако элементы, не являющиеся входными, по умолчанию не могут получать их, и элемент должен каким-то образом получить фокус, прежде чем потерять его - blur по-прежнему не срабатывает для каждого щелчка за пределами div.

В этом вопросе SO упоминается, что присвоение элементу tabindex позволит это, и, похоже, у меня работает в Chrome после изменения jsFiddle. (Хотя и с довольно уродливыми очертаниями.)

person millimoose    schedule 24.09.2011
comment
Да, я знаю, что это то, что говорится в спецификации W3C, но, как я сказал в своем сообщении, согласно документации jQuery, в последних браузерах домен события был расширен, чтобы включить все типы элементов ... Я предполагаю, что FF6 и последняя версия Chrome квалифицироваться. - person jbyrd; 24.09.2011
comment
@jbyrd - не уверен, почему документы jQuery заменяют спецификации W3C - person MattoTodd; 24.09.2011
comment
@jbyrd Я предполагаю, что это означает, что размытие и фокус в браузерах связаны с более общими событиями ввода / вывода фокуса DOM. Тем не менее, не все элементы подходят для них по умолчанию - я соответствующим образом отредактирую ответ. - person millimoose; 25.09.2011

arrow_upward
2
arrow_downward

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

Я ожидаю, что событие размытия сработает, когда я щелкну в любом месте, кроме div ... верно?

Не совсем так, событие размытия происходит только для элемента, у которого был фокус первым.

Итак, чтобы произошло событие размытия, вам сначала нужно сфокусироваться на div, как div сначала получает фокус?

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

var div_id = "#my_div";
var outsideDivClick = function (event) {
  var target = event.target || event.srcElement;
  var box = jQuery(div_id);

  do {
    if (box[0] == target) {
      // Click occured inside the box, do nothing.
      return;
    }
    target = target.parentNode;
  } while (target);   
}
jQuery(document).click(outsideDivClick);

Просто помните, что этот обработчик будет запускаться для КАЖДОГО щелчка по странице. (в прошлом, если мне приходилось использовать что-то подобное, я прикреплял обработчик, когда он мне нужен, и удалял его, когда мне больше не нужно было его искать)

person MattoTodd    schedule 24.09.2011
comment
Хорошо, поэтому я обновил jsfiddle и добавил $ ('# test'). Focus (); ... но все равно не повезло. - person jbyrd; 24.09.2011
comment
Я думаю, вы упустили мою точку зрения, div вообще не может сосредоточиться. - person MattoTodd; 24.09.2011
comment
Но я думаю, что вы, возможно, упустили мою исходную точку зрения, что документация jQuery, похоже, предполагает иное (я мог бы неправильно это истолковать, но это кажется довольно простым). - person jbyrd; 24.09.2011
comment
Я понимаю, как вы это читаете. Я просто не думаю, что это так, или, по крайней мере, я никогда не видел, чтобы все так работало. Раньше мне всегда приходилось использовать описанный выше метод для проверки кликов за пределами определенного div. - person MattoTodd; 24.09.2011
comment
Хорошо, хорошо - да, это интересно. Тогда я полагаю, что документы могут ошибаться. Спасибо за информацию. - person jbyrd; 24.09.2011

arrow_upward
0
arrow_downward

A не может «размыть», потому что это в первую очередь повлечет за собой фокусировку div. Элементы, не являющиеся входными, такие как a и textarea, могут иметь фокус, на что ссылается документация jQuery.

Что вам нужно, так это событие «mouseout» или «mouseleave» (mouseleave не всплывает, mouseout делает), которое запускается, когда курсор покидает div. Если вам нужны клики, я бы прикрепил событие "click" к телу, а также к div и остановил бы распространение события только на div:

$("div").click(function(e) {
    return false; // stop propagation
});

Или, если вы действительно решительно настроены, вы можете имитировать внешний вид div с помощью a и некоторых правил CSS :)

person Community    schedule 24.09.2011

arrow_upward
0
arrow_downward

Если вы хотите, чтобы что-то произошло, пока вы наводите указатель мыши на поле, вы можете использовать событие mouseover.

person Thijs    schedule 20.10.2011
comment
Хорошо, я думаю, я могу понять, откуда вы, но на самом деле вопрос был конкретно о событии размытия, происходящем при нажатии в другом месте. - person jbyrd; 22.10.2011