使用 JS 模拟 Inspect Element 工具

Question

我正在尝试使用 JS 制作一个类似于检查元素的工具。在大多数浏览器的检查工具中，您可以将鼠标悬停在页面上的元素上并单击它们以显示它们在网站代码中的位置。我能想到模拟这一点的唯一方法是将事件侦听器添加到页面上的每个元素。我觉得这很糟糕，原因有很多。我还有其他方法可以做到这一点吗？如果不是，向页面上的每个元素添加事件侦听器是一个好主意吗？

Answer 1

您可以使用 Javascript 的elementFromPoint()方法通过使用鼠标事件获取光标的坐标来获取光标所在的元素。

这是一个代码示例：

function highlighter() {


    function getElementOnCoordinates(x, y) {
        return document.elementFromPoint(x, y)
    }

    let currentElement;
    window.addEventListener('mouseover', (event) => {


        if (currentElement) {
            currentElement.classList.remove('bordered')
        }

        let [x, y] = [event.clientX, event.clientY]
        currentElement = getElementOnCoordinates(x, y);

        currentElement.classList.add('bordered')
    });
}

如您所见，我使用窗口上的鼠标悬停事件来获取光标的坐标，然后使用这些 x 和 y 值获取该位置上存在的元素。然后我添加一个 CSS 类，为该元素提供轮廓。

还有一个条件，检查是否已经存在一个元素并从中删除样式，以便在坐标更改时删除该轮廓。