Question

我有一个浏览器扩展程序，可以截取可见页面的屏幕截图（使用浏览器的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);

问题是菜单在屏幕截图中仍然可见。有没有办法检测何时反映出样式的变化？

感谢。

Answer 1

我通过在父元素上添加一个额外的监听器来解决它（dunno为什么它可以工作）

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

Answer 2

最有可能以适当的延迟将capture内的setTimeout调用到{{1}}内，这样就可以解决问题。

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

2 个答案: