jquery：如何啓用輸入焦點時觸發點擊事件

Question

我有一個輸入字段。在其關注事件中，我打開了一個工具提示，並在其焦點上關閉了工具提示。但是現在我在工具提示上有鏈接，並且我想要使鏈接可點擊。 但是，當我開始聚焦輸入並轉到該工具提示鏈接並嘗試點擊比輸入的聚焦事件首先被調用並且工具提示被關閉。所以我無法點擊該鏈接。 這裏是我的代碼：

HTML：

<div class="block"><input type="text" class="field-input"/><div class="tooltip"> 
<a href="#">tooltip link</a></div> 

CSS：

.block{position:relative;}.tooltip{position:absolute;right:0;display:none;bottom:0;} 

的jQuery：

$('.field-input').on('focusin', function(){ 
$('tooltip').show(); 
}); 
$('.field-input').on('focusout', function(){ 
    $('tooltip').hide(); 
}); 
$('.tooltip a').on('click', function(){ 
    ... do something 
}); 

Answer 1

您可以刪除事件的內容事件綁定當鼠標進入的提示，並添加回去當鼠標離開：

$('.tooltip').on({ 
    mouseenter: function(){ 
    $('.field-input').off('focusout'); 
    }, 
    mouseleave: function(){ 
    $('.field-input').on('focusout', function(){ 
     $('.tooltip').hide(); 
    }); 
    } 
}); 

Answer 2

您可以使用relatedTarget捕捉到正在接收焦點的元素，並且隱藏工具只有在點擊的元素是不工具提示錨。

從文檔：

的MouseEvent.relatedTarget只讀屬性是該事件的次級 目標，如果存在一個。那就是：

事件的內容：的事件目標接收焦點

類似的東西：

$('.field-input').on('focusout', function(e){ 
    var tooltipHolder = $('.tooltip'); 
    var tooltipAnchor = tooltipHolder.find('a'); 
    if (e.relatedTarget !== tooltipAnchor[0]) tooltipHolder.hide(); 
});