Question

当我将div的css样式从block更改为none时，会触发一个纯javascript事件（没有jQuery）。我的印象是我可以通过＆＃34; onBlur＆＃34;但看起来我不能！

请指教！

Answer 1

没有为可见性更改触发DOM事件。

你可以做的最好的事情就是使用相同的功能来调整块的可见性，而不是每次都改变它的样式。

旧模式：

function doSomething() {
    alert("I'm doing something!");
    myBlock.style.display = "block";
}

function doSomethingElse() {
    alert("I'm doing something else now!");
    myBlock.style.display = "none";
}

新模式：

function doSomething() {
    alert("I'm doing something!");
    toggleMyBlock(true);
}

function doSomethingElse() {
    alert("I'm doing something else now!");
    toggleMyBlock(false);
}

function toggleMyBlock(show) {
    if (show) {
        // code here for what would be your 'it became visible' event.
    } else {
        // code here for what would be your 'it became invisible' event.
    }
    myBlock.style.display = show ? "block" : "none";
}

Answer 2

展望未来，新的＃34; Intersection Observer API＆＃34;是你正在寻找的。它目前适用于最新的Chrome，Firefox和Edge。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API。

观察显示的简单代码示例：无切换：

// Start observing visbility of element. On change, the
//   the callback is called with Boolean visibility as
//   argument:

respondToVisibility(element, callback) {
  var options = {
    root: document.documentElement
  }

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

respondToVisibility(myElement, isVisible => {
  if (isVisible) {
    doSomething();
  }
});

行动中：https://jsfiddle.net/elmarj/u35tez5n/5/

Answer 3

您可以使用JavaScript来侦听DOM3事件以进行CSS3过渡（淡入淡出时间最短）：

CSS3 transition events

Answer 4

我认为最接近你要找的是DOMAttrModified event。我不完全确定它的使用方法，但它符合以下方面：

element.addEventListener('DOMAttrModified', function (e) {
  ...
});

事件处理程序会收到MutationEvent，它应该为您提供足够的信息，以确定display是否已设置为block或none。

修改

我可能误解了这个问题。我不相信CSS更改会导致DOMAttrModified事件。最初，我读过这个问题意味着你是通过JavaScript设置display的CSS值。我的回答可能没有帮助。

css样式上的javascript事件从块变为无

4 个答案: