使焦点事件忽略某些元素

Make focusout event ignore some elements

本文关键字：元素 焦点 事件      更新时间：2023-09-26

在下面的代码中，如果您单击<input type="text" id="one" />，则会出现一个"红色块"。如果你聚焦，那么"红色块">就会消失。

我如何使focusout在"红色块"或<input type="text" id="two" />是下一个焦点元素时不会触发？

演示

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 上

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

演示

更新

除非你给它一个像这样的自定义索引，否则你不能真正聚焦一个div tabindex="0" 

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

然后在jQuery中这样做

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

演示

相关文章：