MutationObserver
VoidWh 2020-01-05
监听事件
dom
踩过的坑
# 需求背景
因为工作时遇到了这么一个需求。项目中的datePicker与dataGrid并不是同一套组件,他们显示的层级在弹出errorMessage的情况下,会导致z-index高度过低,无法正确显示层级。为了解决这个问题,我只好在业务页面监听body节点下所有的顶级节点是否有生成目标元素。如果生成,就调低高度(在有errorMessage的情况下)。 以下为实现的源码
# 使用***MutationObserver***来监听dom的增删改查触发事件
// Create an observer instance
private Observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
const newNodes = mutation.addedNodes; // DOM NodeList
if (newNodes && newNodes.length > 0) {
for (let i = 0; i < newNodes.length; i++) {
if (newNodes[i]['className'].indexOf('wj-dropdown') !== -1
&& newNodes[i]['className'].indexOf('wj-inputdate') !== -1) {
// 过滤后业务处理
}
}
}
const removedNodes = mutation.removedNodes; // DOM NodeList
if (removedNodes && removedNodes.length > 0
&& removedNodes[0]['className'].indexOf('wj-dropdown') !== -1
&& removedNodes[0]['className'].indexOf('wj-inputdate') !== -1) {
for (let i = 0; i < removedNodes.length; i++) {
if (removedNodes[i]['className'].indexOf('wj-dropdown') !== -1
&& removedNodes[i]['className'].indexOf('wj-inputdate') !== -1) {
// 删除节点时再把高度重置
}
}
}
});
});
private addZindexfixer() {
// The node to be monitored
const target = document.querySelector('body');
// Configuration of the observer:
const config = {
attributes: true,
childList: true,
characterData: true
};
// Pass in the target node, as well as the observer options
this.Observer.observe(target, config);
}
protected OnDestroy() {
this.Observer.disconnect();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# z-Index相关
在处理遮罩的时候发现,如果
- A:元素 (zIndex:20000)
- B:遮罩元素 (zIndex:10000)
- C:遮罩元素内部的 messageBox DIV (zIndex:30000)
这种布局的话A 元素的层级是最高的。
A > C > B
因为 z-Index 本质上是一个相对概念。