优先点击模糊事件

Question

如果您聚焦输入然后尝试单击其他任何地方 link 消失了，很好。但是如果你集中输入然后尝试点击 link 就没了，但是 link 没有用。那不是我想要的，我想被重定向。我不知道如何实现这一目标。

document.querySelector('input').addEventListener('blur', () => document.querySelector('a').style.display = 'none')

<input type="text"/>
<a href="https://whosebug.com" target="_blank">link</a>

Answer 1

这里的问题与blur事件无关。这只是处理 click 事件并根据 click 的来源以正确的方式处理它的问题。

（我删除了 target=_blank 代码并将链接更改为 example.com，这样示例就可以在 Stack Overflow 代码片段环境中运行。）

// Get a reference to the search items container
const items = document.querySelector(".searchItems");

// All clicks within the document will bubble here
document.addEventListener('click', function(event){ 
  // Depending on what the source of the click was, 
  // do the appropriate thing
  if(event.target.classList.contains("search")){
    // The input was the source of the click
    items.classList.remove("hidden");  // Unhide the search items
  } else if(!event.target.classList.contains("item")){
    // Something other than the input or a link was clicked
    items.classList.add("hidden");  // Hide the search items
  }
});

.hidden { display:none; }

<input type="text" class="search">
<div class="searchItems hidden">
  <a href="https://example.com" class="item">link</a><br>
  <a href="https://example.com" class="item">link</a><br>
  <a href="https://example.com" class="item">link</a><br>
  <a href="https://example.com" class="item">link</a><br>
</div>

优先点击模糊事件

Prioritize a click to a blur event

javascript

dom-events