javascript - 关闭覆盖 DOM 元素后链接导航短暂被阻止

Question

当关闭覆盖的 DOM 元素后立即单击链接时，某些浏览器(Chrome、IE)似乎会短暂阻止链接导航。

例如，当您有以下 HTML 时(请参阅 https://jsfiddle.net/robbertbrak/emumnjpg/ ):

<a id='my-link' href="http://www.google.com" target="_blank">Go to Google</a>

<div id="popover-container">
  <div id="popover">Click to close</div>
</div>

使用以下 CSS 将弹出窗口容器元素定位在链接上:

#popover-container {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
}

#popover {
  border: 1px solid black;
  width: 200px; height: 200px;
  position: absolute; left: 200px; top: 200px;
}

以及以下 Javascript:

var container = document.getElementById('popover-container');
var link = document.getElementById('my-link');

container.addEventListener('click', function() {
  container.parentNode.removeChild(container);
});

link.addEventListener('click', function() {
  var div = document.createElement('div');
  div.textContent = 'clicked';
  this.parentNode.appendChild(div);
});

重现如下:

• 快速连续点击链接两次(大约一秒内)。
• “已点击”一词出现在链接下方。
• 浏览器不会打开新选项卡来导航到链接指向的 URL。

请注意，当点击之间有足够的时间时，链接导航会按预期工作。

另请注意，链接上的点击处理程序按预期触发，只是链接导航被阻止。

我的问题:为什么会出现这种行为？它有记录在某处吗？

Answer 1

我怀疑第二次点击是“双击”，而 Chrome 会忽略它。您可以使用以下方法解决此问题:

link.addEventListener('dblclick', function(ev) {
  link.click();
});

请注意点击处理程序上的第二次虚假点击。

https://jsfiddle.net/539hr864/1/