LOGO
Published on

结构图插件系列:兼容IE11

Authors
  • avatar
    Name
    梅亮
    Twitter

开发完结构图插件后,沾沾自喜了一段时间,直到产品演示会时,领导灵魂一击:兼容IE吗? 作为HR系统软件,传统行业的客户还是很多的,IE是必须兼容的?

问题汇总

结构图插件遇到了哪些IE兼容问题。

  • 箭头函数
  • append()appendChild
  • 鼠标事件的offsetXoffsetYmovementXmovementY
  • 鼠标滚轮事件wheelData
  • 浏览器窗口宽高计算
  • SVG字体图标

箭头函数

IE浏览器不支持箭头函数。如果您的代码使用了箭头函数,则需要使用其他语法来代替。例如,可以将箭头函数转换为普通函数:

// 使用箭头函数
const add = (x, y) => x + y;

// 转换为普通函数
function add(x, y) {
  return x + y;
}

append和appendChild

IE浏览器支持appendChild方法,但不支持append()方法。如果您的代码使用了append()方法,则需要使用appendChild方法来代替:

// 使用 append() 方法
parent.append(child);

// 转换为 appendChild() 方法
parent.appendChild(child);

鼠标事件

IE浏览器对鼠标事件的offsetXoffsetYmovementXmovementY属性的支持不完全。在IE9及更早版本中,这些属性的值始终为0。

为了在IE浏览器中获得正确的鼠标坐标,可以使用以下方法:

// 获取鼠标相对于目标元素的坐标
const x = event.clientX - target.getBoundingClientRect().left;
const y = event.clientY - target.getBoundingClientRect().top;

// 获取鼠标移动的距离
const dx = event.movementX || event.clientX - lastX;
const dy = event.movementY || event.clientY - lastY;

// 更新上次鼠标的位置
lastX = event.clientX;
lastY = event.clientY;

鼠标滚轮事件

IE浏览器对鼠标滚轮事件的wheelData属性的支持不完全。在IE9及更早版本中,wheelData属性的值始终为120或-120。

为了在IE浏览器中获取鼠标滚轮滚动的距离,可以使用以下方法:

// 获取鼠标滚轮滚动的距离
const delta = event.deltaY || event.wheelDelta;

// 兼容 IE 浏览器
if (event.wheelDelta) {
  delta = -event.wheelDelta / 120;
}

浏览器窗口宽高

IE浏览器计算浏览器窗口宽高的方式与其他浏览器不同。在IE浏览器中,window.innerWidthwindow.innerHeight属性的值不包括滚动条的宽度和高度。

为了在IE浏览器中获取正确的浏览器窗口宽高,可以使用以下方法:

// 获取浏览器窗口的宽度
const width = document.documentElement.clientWidth || document.body.clientWidth;

// 获取浏览器窗口的高度
const height = document.documentElement.clientHeight || document.body.clientHeight;

SVG字体图标

如果不用兼容IE,那么SVG中的字体图标,可以用编码+类名使用。

<text class="font-className">&#EC138;</text>

但是在IE里只能使用图片代替了。