ОБНОВЛЕНИЕ: (recap, скрипка и баунти)
Этот вопрос не привлекает слишком много внимания, поэтому я собираюсь провести некоторое впечатление на него. Я знаю, что я склонен быть слишком многословным как в моих ответах, так и в вопросах. Вот почему я пошел вперед и настроил эту скрипту, которая, на мой взгляд, является достойным представлением того типа кода, который я сейчас имею чтобы приблизиться к пузырящему событию change. Несколько проблем, которые я пытаюсь решить:
- Событие
pseudo-changeне срабатывает над элементом select, если только он не теряет фокус. В некоторых случаях клиент должен быть перенаправлен при выборе нового значения. Как мне это достичь? - Обработчик вызывается как при нажатии этикеток, так и в самих флажках. Само по себе то, что вы ожидаете, но из-за события, пузырящегося в нем (AFAIK), невозможно определить, какой элемент был нажат. Объект события IE не имеет свойства
realTarget. - При изменении
checked-state флажка в IE, нажав на метку, все хорошо (хотя для этого требуются некоторые неприятные обходные пути), но при непосредственном нажатии флажка вызывается обработчик, но проверенное состояние остается без изменений, пока я не щелкнул второй раз. Затем значение изменяется, но обработчик не вызывается. - Когда я переключаюсь на другую вкладку и обратно, обработчик вызывается несколько раз. Три раза, если проверенное состояние действительно изменилось, дважды, если я щелкнул чекбокс только один раз.
Приветствуется вся информация, которая могла бы помочь мне решить один или несколько вышеперечисленных вопросов. Пожалуйста, я не забыл добавить тег jQuery, мне нравится чистый JS, поэтому я ищу чистый ответ JS.
У меня есть веб-страница с более чем 250 элементами выбора на ней и 20-30 флажков. Я также должен отслеживать действия пользователей и предпринимать соответствующие действия. Поэтому для меня вполне естественно делегировать событие изменения, а не добавлять сотни слушателей, IMHO.
Конечно, политика IE-company: поддержка IE8 - не запускает событие onchange, когда мне это нужно. Поэтому я пытаюсь подделать событие onchange. То, что я до сих пор работает достаточно хорошо, кроме одной вещи, которая действительно меня беспокоит.
Я использую onfocusin и onfocusout для регистрации событий. В некоторых случаях, когда пользователь выбирает новое значение из элемента select, script должен немедленно ответить. Однако, пока выбор не потерял фокус, этого не произойдет.
Вот что я придумал до сих пор:
i = document.getElementById('content');
if (!i.addEventListener)
{
i.attachEvent('onfocusin',(function(self)
{
return function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
switch (target.tagName.toLowerCase())
{
case 'input':
if (target.getAttribute('type') !== 'checkbox')
{
return true;
}
return changeDelegator.apply(self,[e]);//(as is
case 'select':
self.attachEvent('onfocusout',(function(self,current)
{
return function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (target !== current)
{
return;
}
self.detachEvent('onfocusout',arguments.callee);//(remove closure
return changeDelegator.apply(self,[e]);
}
})(self,target));
default: return;
}
}
})(i));//(fake change event, buggy
}
else
{//(to put things into perspective: all major browsers:
i.addEventListener('change',changeDelegator,false);
}
Я попытался подключить другой прослушиватель событий внутри обработчика onfocusin, связанный с событием onclick. Он выпустил событие onfocusout для любого выбранного пункта с фокусным банкоматом. Единственная проблема заключается в том, что 99,9% пользователей будут щелкать по выбору, поэтому событие focusin также запускает onclick.
Чтобы обойти это, я создал закрытие и передал текущий select-in-focus и его исходное значение в качестве аргументов. Но некоторые пользователи используют свою клавиатуру, и эти пользователи часто переходят к следующему полю выбора без изменения значения. Каждый раз привязывая новый onclick-прослушиватель... Я действительно считаю, что это проще, чем проверять все e.type и обрабатывать их отдельно.
Как пример: код с дополнительным прослушивателем onclick: весь код такой же, как и первый фрагмент, поэтому я просто вставляю блок case 'select':
case 'select':
self.attachEvent('onfocusout',(function(self,current)
{
return function(e)
{
e = e || window.event;//(IE...
var target = e.target || e.srcElement;
if (!(target === current))
{
return;
}
self.detachEvent('onfocusout',arguments.callee);//(remove closure
return changeDelegator.apply(self,[e]);
};
})(self,target));
self.attachEvent('onclick',(function(self,current,oldVal)
{
return function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === 'option')
{
while(target.tagName.toLowerCase() !== 'select')
{
target = target.parentNode;
}
}
if (target !== current)
{//focus lost, onfocusout triggered anyway:
self.detachEvent('onclick',arguments.callee);
return;
}
var val = target.options[target.selectedIndex].innerHTML;//works best in all browsers
if (oldVal !== target.options[target.selectedIndex].innerHTML)
{
self.detachEvent('onclick',arguments.callee);
return target.fireEvent('onfocusout');
}
};
})(self,target,target.options[target.selectedIndex].innerHTML));
default: return;
