JQuery размытия обработчик не работает на элементе div? - PullRequest
Новая
       8

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

3 голосов
/ 24 сентября 2011

Я не понимаю, почему обработчик размытия jQuery не работает в самом простом случае. Я буквально создаю div 100px на 100px и устанавливаю для него событие размытия, но оно не срабатывает ( 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.

Ответы [ 4 ]

6 голосов
/ 24 сентября 2011

Из спецификации W3C DOM Events :

focus

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

blur

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

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

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

2 голосов
/ 24 сентября 2011

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

Я ожидаю, что событие размытия сработает, когда я нажму в любом месте, кроме 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);

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

0 голосов
/ 20 октября 2011

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

0 голосов
/ 24 сентября 2011

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

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

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

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

...