如何在ul元素上触发聚焦事件? [英] How to trigger focusout event on a ul element?
问题描述
我有一个插件可以更改所有浏览器中select html标签的外观.
我正在尝试使新样式的元素集的行为像普通的select标签一样.我快到了，但是我只需要弄清楚一件事，这就是隐藏焦点上的ul的方法.
首先，这是新select元素的演示(不是英语，但是您可以轻松找到它^^): http://mahersalam.co.cc/projects/n-beta/
如果单击选择元素的切换按钮，然后单击鼠标左键，则具有选项的ul元素不会消失.那是因为我无法在该ul上触发一个focusout事件.
以下是控制事件处理方式的代码:
// Make a div which will be used offline and then inserted to the DOM
$namodgSelect = $('<div class="namodg-select"></div>');
/* other stuff ... */
$namodgSelect // Handle all needed events from the wrapper
.delegate('a', 'click focus blur', function(e) {
// Type of the event
var type = e.type,
// Declare other vars
id,
$this;
e.preventDefault(); // Stop default action
// Make an id ot the element using it's tag name and it's class name
// Note: Because we add a class on the active toggler, it's easier to remove it from here and the logic will still work
id = e.target.tagName.toLowerCase() + '.' + e.target.className.replace(' toggler-active', '');
switch (id) {
case 'p.selected': case 'div.toggle-button':
// Only accept 'click' on p and div
if ( type != 'click') {
return;
}
// Show and hide the options holder
if ( $optionsHolder.data('hidden') ) {
$selectElem.focus();
// This needs to run fast to give feedback to the user
$toggler.addClass('toggler-active').data('active', true);
// Show the options div
$optionsHolder.stop(true, true).slideDown('fast', function() {
// Sometimes fast clicking makes the toggler deavtive, so show it in that case
if ( ! $toggler.data('active') ) {
$toggler.addClass('toggler-active').data('active', true);
}
}).data('hidden', false);
} else {
$selectElem.blur();
// Hide the options div
$optionsHolder.stop(true, true).slideUp(function() {
// Only hide the toggler if it's active
if ( $toggler.data('active') ) {
$toggler.removeClass('toggler-active').data('active', false);
}
}).data('hidden', true);
}
break;
case 'a.toggler':
switch (type) {
case 'focusin':
$selectElem.focus();
break;
case 'focusout':
// Only blur when the options div is deactive
if ( $optionsHolder.data('hidden') ) {
$selectElem.blur();
}
break;
case 'click':
$selectedHolder.click();
$selectElem.focus();
}
break;
case 'a.option':
// Stop accept click events
if ( type != 'click') {
return;
}
// cache this element
$this = $(this);
// Change the value of the selected option and trigger a change event
$selectedOption.val( $this.data('value') ).change();
// Change the text of the fake select and trigger a click on it
$selectedHolder.text( $this.text() ).click();
break;
}
})
可以从演示中看到整个代码.如您所见，我已经在切换器和选项上使用了focusout事件，因此发生这种情况时我无法隐藏ul(这将禁用选项卡的功能).
如果有人可以帮助我，将不胜感激.谢谢.
我能够使用以下代码隐藏选项面板:
$(document).click(function() {
if ( $optionsHolder.data('hidden') || $optionsHolder.is(':animated') ) {
return;
}
$selectedHolder.click();
})
之所以起作用，是因为专注于另一个输入就像单击document一样.
I have a plugin that changes the look of select html tag on all browser.
I'm trying to make the new styled set of elements behave like a normal select tag. I'm almost there, but I only need to figure one thing out and that's how to hide a ul on focus out.
First off, here is a demo of the new select element (not in English, but you can find it easily ^^) : http://mahersalam.co.cc/projects/n-beta/
If you click the toggle button of the select element, and then click away, the ul element that has the options won't disappear. That's because I can't fire a focusout event on that ul.
Here is the code that controls how the events are handled:
// Make a div which will be used offline and then inserted to the DOM
$namodgSelect = $('<div class="namodg-select"></div>');
/* other stuff ... */
$namodgSelect // Handle all needed events from the wrapper
.delegate('a', 'click focus blur', function(e) {
// Type of the event
var type = e.type,
// Declare other vars
id,
$this;
e.preventDefault(); // Stop default action
// Make an id ot the element using it's tag name and it's class name
// Note: Because we add a class on the active toggler, it's easier to remove it from here and the logic will still work
id = e.target.tagName.toLowerCase() + '.' + e.target.className.replace(' toggler-active', '');
switch (id) {
case 'p.selected': case 'div.toggle-button':
// Only accept 'click' on p and div
if ( type != 'click') {
return;
}
// Show and hide the options holder
if ( $optionsHolder.data('hidden') ) {
$selectElem.focus();
// This needs to run fast to give feedback to the user
$toggler.addClass('toggler-active').data('active', true);
// Show the options div
$optionsHolder.stop(true, true).slideDown('fast', function() {
// Sometimes fast clicking makes the toggler deavtive, so show it in that case
if ( ! $toggler.data('active') ) {
$toggler.addClass('toggler-active').data('active', true);
}
}).data('hidden', false);
} else {
$selectElem.blur();
// Hide the options div
$optionsHolder.stop(true, true).slideUp(function() {
// Only hide the toggler if it's active
if ( $toggler.data('active') ) {
$toggler.removeClass('toggler-active').data('active', false);
}
}).data('hidden', true);
}
break;
case 'a.toggler':
switch (type) {
case 'focusin':
$selectElem.focus();
break;
case 'focusout':
// Only blur when the options div is deactive
if ( $optionsHolder.data('hidden') ) {
$selectElem.blur();
}
break;
case 'click':
$selectedHolder.click();
$selectElem.focus();
}
break;
case 'a.option':
// Stop accept click events
if ( type != 'click') {
return;
}
// cache this element
$this = $(this);
// Change the value of the selected option and trigger a change event
$selectedOption.val( $this.data('value') ).change();
// Change the text of the fake select and trigger a click on it
$selectedHolder.text( $this.text() ).click();
break;
}
})
The whole code can be seen from the demo. As you can see, I already use the focusout event on the toggler and the options, so I can't hide the ul when that happens (that will disable the tab functionality).
If anyone can help me with this , it will be appreciated. Thanks.
I was able to hide the options panel using this code:
$(document).click(function() {
if ( $optionsHolder.data('hidden') || $optionsHolder.is(':animated') ) {
return;
}
$selectedHolder.click();
})
This works because focusing on another input is like a click on the document.
这篇关于如何在ul元素上触发聚焦事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
