使焦点事件忽略某些元素 [英] Make focusout event ignore some elements

问题描述

在下面的代码中，如果单击<input type="text" id="one" />并出现一个红色方块" .如果您集中注意力，则红色方块" 消失.

In the code below if you click on <input type="text" id="one" /> and a "red block" appears. If you focus out then the "red block" disappears.

如果下一个要关注的元素是红色方块"或"<input type="text" id="two" />"，那么如何使focusout不会触发?

How do I make it so that focusout wont fire if "red block" or <input type="text" id="two" /> are the next focused elements?

演示

JavaScript

$('#one').focus(function () {
    $('#divRemove').show();
});

$('#one').focusout(function () {
    $('#divRemove').hide();
});

$('#divRemove').click(function(){
    alert($(this).text());    
});

HTML

<input type="text" id="one" />_______
<input type="text" id="two" />
<br/>
<br/>
<div id="divRemove" style="width:100px;height:100px;background:red; display:none;">remove on focus out</div>

推荐答案

您可以将重点放在#one和#two

You can put the focus on both #one and #two

$('#one,#two').focus(function () {
    $('#divRemove').show();
}).focusout(function () {
    $('#divRemove').hide();
});

演示

更新

除非使用tabindex="0"

<div id="divRemove" tabindex="0"

然后在jQuery中执行

and then in jQuery do this

$('#one,#two,#divRemove').focus(function () {
    $('#divRemove').show();
}).focusout(function () {
    $('#divRemove').hide();
});

演示

这篇关于使焦点事件忽略某些元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！