jquery：如何启用输入焦点时触发点击事件

我有一个输入字段。在其关注事件中，我打开了一个工具提示，并在其焦点上关闭了工具提示。但是现在我在工具提示上有链接，并且我想要使链接可点击。但是，当我开始聚焦输入并转到该工具提示链接并尝试点击比输入的聚焦事件首先被调用并且工具提示被关闭。所以我无法点击该链接。这里是我的代码：jquery：如何启用输入焦点时触发点击事件

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 
});

来源

2017-02-03 Sharjil Khan

您可以删除事件的内容事件绑定当鼠标进入的提示，并添加回去当鼠标离开：

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

来源

2017-02-03 04:56:10

感谢塞尔吉奥，我从未有过一个想法，这将是非常简单的。 –

您可以使用relatedTarget捕捉到正在接收焦点的元素，并且隐藏工具只有在点击的元素是不工具提示锚。

从文档：

的MouseEvent.relatedTarget只读属性是该事件的次级目标，如果存在一个。那就是：

事件的内容：的事件目标接收焦点

类似的东西：

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

来源

2017-02-03 05:17:48 mrlew

jquery：如何启用输入焦点时触发点击事件

回答

相关问题