如何将提交事件延迟到JS中的另一个事件完成之前？

Question

我正在制作一个chrome扩展程序，该扩展程序会在单击特定按钮后创建并弹出一个叠加层。单击当前页面上的按钮会将其带到另一个页面。单击按钮后，我想弹出一个叠加层，只有在关闭叠加层后才将其带到下一页。这是我的第一个使用JS的项目，所以我有点迷路。

这就是我创建叠加层的方式

//injecting css
var link = document.createElement("link");
link.href = chrome.extension.getURL("css/overlay.css");
link.type = "text/css";
link.rel = "stylesheet";
document.head.appendChild(link);

//setting button's ID for easy referencing
var button = document.getElementsByName("proceedToCheckout")[0].setAttribute("id", "proceedToCheckout");

var overlay = document.createElement("DIV");
overlay.setAttribute("id", "overlay");
document.body.appendChild(overlay);

var url = chrome.extension.getURL("terry.jpg");
var img = document.createElement("IMG");
img.setAttribute("id", "terryImage");
img.setAttribute("src", url);
overlay.appendChild(img);

这就是我如何使用主点击功能

document.getElementById("proceedToCheckout").addEventListener("click", function()
 {
     alert("Do you really need that?");
     document.getElementById("overlay").style.display = "block";
     event.preventDefault();

     //disable overlay once clicked
     document.getElementById("overlay").addEventListener("click", function (){
        document.getElementById("overlay").style.display = "none";
    })

})

由于我正在使用event.preventDefault（），因此不允许我继续该事件。我还有其他方法可以解决吗？谢谢。