javascript - Javascript - Detect when the style changes are reflected?

Question

I have a browser extension that takes a screenshot of the visible page (using the browser's API).

The user initiate the process by a custom context menu, injected into webpages.

wrapper.addEventListener("contextmenu", function(e) {
    //prevent default context menu
    e.preventDefault();
    menu.style.display = "block";
});

menu.addEventListener("click", function click(e) {
    e.preventDefault();
    e.stopPropagation();
    //prevent the appearance of the menu in the screenshot
    menu.style.display = "none";
    capture();
}, false);

The problem is that the menu is still visible in the screen capture. Is there a way to detect when the style changes are reflected ?

Thanks.

Answer 1

最有可能将呼叫capture放入 asetTimeout并适当延迟会为您解决问题。

Answer 2

我通过在父元素上附加一个额外的监听器来解决它（不知道为什么它会起作用）

wrapper.addEventListener("contextmenu", function(e) {
    //prevent default context menu
    e.preventDefault();
    menu.style.display = "block";
});

wrapper.addEventListener("mousedown", function(e) {
    //can't use "display: none" before mouseup
    menu.style.opacity = 0;
}, false);

menu.addEventListener("click", function click(e) {
    e.preventDefault();
    e.stopPropagation();
    //prevent the appearance of the menu in the screenshot
    menu.style.display = "none";
    capture();
}, false);