Javascript -检测何时反映了样式更改

Javascript - Detect when the style changes are reflected?

本文关键字：样式 检测 何时反 Javascript      更新时间：2023-09-26

我有一个浏览器扩展，可以截取可见页面的屏幕截图(使用浏览器的API)。

用户通过注入到网页中的自定义上下文菜单启动进程。

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

问题是菜单在屏幕截图中仍然可见。是否有一种方法可以检测何时样式更改被反映?

谢谢。

我通过在父元素上附加一个额外的侦听器来解决这个问题(不知道为什么它可以工作)

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

很可能将对capture的调用放在具有适当延迟的setTimeout中会达到目的。

相关文章：