优先点击模糊事件

Question

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

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

 <input type="text"/> <a href="https://stackoverflow.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>