Question

在关闭重叠的DOM元素后立即点击链接时，某些浏览器（Chrome，IE）似乎会暂时阻止链接导航。

例如，如果您有以下HTML（请参阅https://jsfiddle.net/robbertbrak/emumnjpg/）：

$link = new mysqli_connect("localhost", "root", " ", "firstwebsitedb");

$sql="INSERT INTO posts(post_title, post_author, post_img, post_content) VALUES($title,$author,$image_name,$content)";

if ($link->query($sql)){
    echo "<script>alert('Post is Published')</script>";
}
else{
    echo "<script>alert('Post is not Published')</script>";
}

以下CSS将popover容器元素放在链接上：

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

以及以下Javascript：

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

重现如下：

在链接上快速连续点击两次（大约一秒钟内）。
单词＆＃39;点击＆＃39;出现在链接下方。
浏览器不打开新标签页以导航到该链接指向的网址。

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

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

我的问题：为什么会出现这种情况？它是在某处记录的吗？

Answer 1

我怀疑第二次点击是“双击”，而Chrome则忽略了它。你可以解决这个问题：

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

注意点击处理程序的第二次假冒点击。

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

Answer 2

只需将您的popover-container background-color视为橙色：https://jsfiddle.net/emumnjpg/1/

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

或者查看第二个示例，popover-container从顶部开始设置，这样您就可以点击该链接，并且第一次按预期工作https://jsfiddle.net/emumnjpg/2/

关闭重叠DOM元素后，简要阻止了链接导航

2 个答案: