一个可以扩展你思路的浏览器API

API 介绍

document.elementFromPoint(x, y)

方法 elementFromPoint 返回给定坐标点下最上层的  element  元素。 

如果指定的坐标点在文档的可视范围外,或者两个坐标都是负数,那么结果返回  null

这是以前做编辑器需求的时发现的一个 API ,最近做编辑器块级元素拖拽时又再次用,发现它非常好用,能处理以前很多以前无法解决的场景,所以分享出来。

基本使用

function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
复制代码

特殊场景

这里是一个控制拖拽图标显示的场景,拖拽图标元素放在编辑器外部扩展,位置是通过绝对定位实现。

基本思路:

当鼠标在编辑器上 hover 时,通过 move 事件的 target 对象可以查找到关联的块元素,这样就可以根据块元素位置定位拖拽图标。

显示隐藏:

另外一个需要考虑的需求就是当鼠标离开可编辑区域时移除拖拽图标,有了这个需求仅靠前面的思路就会有问题,因为鼠标一旦离开中间的内容区域就代表着技术上不能根据 target 获取到关联的块元素,这也就意味着无法确定拖拽图标和那个块元素关联,就需要移除拖拽图标了,但其实这个时候用户可能只是想把鼠标移动到拖拽图标上进行拖拽,这就很尴尬了。

空白区域:

另外一个就是其它知识库产品其实有实现当我鼠标在空白区域(下图红框内)甚至是空白区域两边的灰色区域时仍然显示拖拽图标。

image.png

elementFromPoint + 灵活处理

拖拽图标定位.png

其中最关键的第4步就需要用到 elementFromPoint 方法,当然我们实际处理的比这还要复杂一些,但是大致思路就是这样。

浏览器兼容性

image.png

MDN 地址: developer.mozilla.org/en-US/docs/…

猜你喜欢

转载自juejin.im/post/7068821209298763790