Question

我有一个输入字段。在焦点事件中，我正在打开一个工具提示，并且我正在关闭工具提示。但是现在我在工具提示上有一个链接以及我想要做什么来使该链接可点击。但是当我开始聚焦输入并转到该工具提示链接并尝试点击而不是输入的焦点事件首先被调用并且工具提示被关闭。所以我无法点击该链接。这是我的代码：

HTML：

ngOnInit() {
  this.userService.loggedIn.subscribe(response => this.isCurrentUserExist = response);    
}

的CSS：

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

jquery的：

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

Answer 1

当鼠标进入工具提示时，您可以删除聚焦事件绑定，并在鼠标离开时将其添加回来：

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

Answer 2

您可以使用relatedTarget捕获正在接收焦点的元素，并仅在被点击的元素不工具提示锚点时隐藏工具提示。

来自文档：

MouseEvent.relatedTarget 只读属性是辅助属性   事件的目标，如果有的话。那就是：

焦点：获得焦点的EventTarget

类似的东西：

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

Jquery：如何在启用输入焦点时触发单击事件

2 个答案: