JavaScript/jQuery:如何在“;显示:无”;被移除

JavaScript/jQuery: How to trigger an event when "display: none" is removed?

本文关键字：显示 jQuery JavaScript      更新时间：2023-09-26

如果之前有人回答，我很抱歉，我在搜索中找不到它。

我必须标记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 );

开始

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

基本上，我们在样式属性中得到默认值集（如果有的话）——它存储在previousValue中；然后我们留下代码，但我们在循环中做了一些不同。首先，我们检查目标中的样式是否发生了更改。然后我们在目标的样式属性中获得当前显示值。下一步是比较这些值。如果previousValue为"none"，而现在为其他值，则表示显示：none未设置。但是，您必须注意，它只会侦听这个特定的更改。如果你不需要听"无"，那么你可以省略它。

你可以在你的代码中使用它——我不是故意写你的整个代码的，所以可以随意添加你的事件监听器。

当元素被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)

不幸的是，我不确定你是如何"删除"display: none的，但是，如果你碰巧使用了jQuery的$.show函数，那么你可以指定一个"回调"函数，该函数将在节目"动画"结束后调用。

这里有一个例子：

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

同样，我不确定您是如何删除display: none的，所以这可能根本没有帮助。

相关文章：