关闭叠加DOM元素后，导致链接导航暂时无法运行

当关闭叠加的DOM元素后，某些浏览器（Chrome，IE）会立即单击链接时会暂时阻止链接导航。关闭叠加DOM元素后，导致链接导航暂时无法运行

例如，当你有以下的HTML（见https://jsfiddle.net/robbertbrak/emumnjpg/）：

#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：

<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到酥料饼的容器元素上放置链接：

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

重现如下：

在链接上快速连续点击两次（大约一秒内）。
“clicked”一词出现在链接下。
浏览器确实不是打开一个新选项卡以导航到链接指向的URL。

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

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

我的问题：为什么会发生这种行为？它是否记录在某处？

来源

2017-04-18 Rubrick

只要给你一个popover-container像background-color橙色：https://jsfiddle.net/emumnjpg/1/

然后你会看到第一次点击只是删除其覆盖你的链接popover-container。这就是为什么你只是认为你点击链接，但实际上你点击第一次点击popoer-container。

或者看看其中popover-container被设置为从上面移开，以便您可以点击链接第二个例子，它适用于预期https://jsfiddle.net/emumnjpg/2/

来源

2017-04-18 07:18:05 caramba

我想你错误地理解了我的问题。我知道'popover-container'最初覆盖了链接;这是触发我询问的行为的设置的必要部分。 – Rubrick

我怀疑第二次点击通过来的第一次作为一个'双击'和铬是无视它。你可以用这个解决它：

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

注意第二个点击处理程序的虚假点击。

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

来源

2017-04-18 07:42:00 Charlie

关闭叠加DOM元素后，导致链接导航暂时无法运行

回答

相关问题