去掉“display: none”后如何触发事件？

Question

如果之前已经回答过这个问题，我深表歉意，我无法使用搜索找到它。

我必须标记 4 个元素，以便在它们取消隐藏时触发事件（“display: none”被删除）。 我认为mutationObserver是正确的方法，但我在过滤我需要的事件时遇到了麻烦。

有人有这方面的经验吗？

编辑：不幸的是，我们无法访问实际取消隐藏元素的脚本。 它们由另一个团队拥有和保护。 我们唯一可以关注的是元素何时取消隐藏。

我试图弄清楚如何根据我的需要进行编辑。

    // Blocker is the element that has a changing display value
var blocker  = document.querySelector( '#blocker' );
// Trigger changes the display value of blocker
var trigger  = document.querySelector( '#trigger' );
// Our mutation observer, which we attach to blocker later
var observer = new MutationObserver( function( mutations ){
    mutations.forEach( function( mutation ){
        // Was it the style attribute that changed? (Maybe a classname or other attribute change could do this too? You might want to remove the attribute condition) Is display set to 'none'?
        if( mutation.attributeName === 'style' && window.getComputedStyle( blocker ).getPropertyValue( 'display' ) !== 'none'
          ){
            alert( '#blocker\'s style just changed, and its display value is no longer \'none\'' );
        }
    } );
} );

// Attach the mutation observer to blocker, and only when attribute values change
observer.observe( blocker, { attributes: true } );

// Make trigger change the style attribute of blocker
trigger.addEventListener( 'click', function(){
    blocker.removeAttribute( 'style' );
}, false );

Answer 1

如果通过 style 属性设置

display:none

，则以下代码有效。如果您还需要通过切换类来处理显示/隐藏的情况，请使用

ResizeObserver

方法，如 BenVida 的答案所示。

var blocker  = document.querySelector('#blocker');
var previousValue = blocker.style.display;

var observer = new MutationObserver( function(mutations){
    mutations.forEach( function(mutation) {
        if (mutation.attributeName !== 'style') return;
        var currentValue = mutation.target.style.display;
        if (currentValue !== previousValue) {
           if (previousValue === "none" && currentValue !== "none") {
             console.log("display none has just been removed!");
           }

           previousValue = mutation.target.style.display;
        }
    });
});


observer.observe(blocker, { attributes: true });

基本上我们得到了 style 属性中设置的默认值（如果有的话）——它存储在

previousValue

中；然后我们留下代码，但我们在循环中做了一些改变。首先我们检查目标中的样式是否已更改。然后我们在目标的 style 属性中获取当前的显示值。下一步是比较这些值。如果 previousValue 是“none”，而现在是其他值，则意味着 display: none 未设置。但是您必须注意，它仅侦听此特定更改。如果你不需要听“none”那么你可以省略它。

您可以在代码中使用它 - 我不是故意编写整个代码的，因此请随意在目标上添加事件侦听器。

Answer 2

我发现还有另一种方法，当元素被

display:none

隐藏或变得可见时，可以可靠地触发事件。

这是基于 ResizeObserver API，它应该适用于所有现代浏览器（https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API）

当一个元素应用了 css 规则

display:none

时，它的所有尺寸都将为零。因此，为了检测变得可见，我们只需要观察可见时具有非零尺寸的元素。

const block=document.querySelector("#the-block")
const resizewatcher=new ResizeObserver(entries => {
  for (const entry of entries){
    console.log("Element",entry.target, 
      (entry.contentRect.width == 0) ? 
      "is now hidden" : 
      "is now visible"
    )
  }
})
resizewatcher.observe(block)

Answer 3

不幸的是，我不确定你如何“删除”

display: none

，但是，如果你有机会使用 jQuery 的

$.show

函数，那么你可以指定一个“回调”函数，这将是节目“动画”结束后就被调用。

这是一个例子：

$(".myElement").show(400, function() {
    // Do something...
});

再次，我不确定you如何删除

display: none

，所以这可能根本没有帮助。