javascript 单击元素后如何触发“聚焦”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10684995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I trigger a 'focusout' after I click on an element?
提问by William Calleja
I have the following markup:
我有以下标记：
<select style="display:none">
<option value='1'>1</option>
<option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
<li id='1'>1</li>
<li id='2'>2</li>
</ul>
and the following JQuery code:
以及以下 JQuery 代码：
$(document).ready(function() {
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
});
When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?
当我单击 LI 之一时，“comboBoxData”元素在单击触发器发生之前消失。有没有办法解决这个问题或替代事件，我可以使用它来代替焦点获得相同的效果？
回答by Tejasva Dhyani
Put mouseenter and mouseleave events and change the value of a global variable say isOver.
放置 mouseenter 和 mouseleave 事件并更改全局变量的值，例如 isOver。
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBoxData').mouseover(function(){
isOver = true;
}).mouseleave(function(){
isOver = false;
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
if(!isOver){
$('#comboBoxData').hide();
}
});
回答by Vimalnath
You do not require this:
你不需要这个：
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
instead use this inside $('#comboBoxData').on('click', 'li', function() {
而是在里面使用这个 $('#comboBoxData').on('click', 'li', function() {
if you are fine with plugin , you could just use this way:
如果你对 plugin 没问题，你可以这样使用：
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
You can get that plugin here
你可以在这里得到那个插件
Also, I have changed the code without using the plugin: Please check the updated answer:
另外，我在不使用插件的情况下更改了代码：请检查更新的答案：
回答by jbduzan
try with blur()function
尝试blur()功能
$('#comboBox').blur(function () {
$('#comboBoxData').hide();
});
The blur event is sent to an element when it loses focus.
当元素失去焦点时，模糊事件被发送到元素。
回答by BenSchro10
Not exactly elegant but it works.
不完全优雅，但它有效。
$("body").click(function(event){
if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){
$("#comboBoxData").hide(); }
});
$(document).ready(function() {
$('select').each(function() {
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
});
