以编程方式检测元素是否能够被徘徊

Question

使用bookmarklet我想使用jquery .hover()将img元素与mouseenter和mouseleave事件的处理程序绑定,但在某些情况下,永远不会触发鼠标事件,因为img元素以某种方式隐藏在鼠标中,尽管图像是事实上可见:一个简单的例子是当透明元素重叠时.如果您使用像firebug检查器这样的工具,您会发现许多这样的例子.

我怎么能弄清楚这种行为？理想情况下,我想构建一个函数,它将返回true或false,具体取决于元素是否可以移动.

谢谢大家

Answer 1

问题:

真正的问题是,有很多方法可以涵盖一个元素.例如,元素是否覆盖了4个其他元素,中间只有一个空格？我的意思是:

假设红色框是有问题的元素,直接在中心的小框是直接查看元素.

由于这些问题,确定元素是否具有任何可收回区域可能变得非常"昂贵".

解决方案:

我想出了使用的解决方案boundingClientRect,document.elementFromPoint并且文档滚动.它试图通过检查所讨论的元素的4个角来快速确定,然后如果那些返回假,则开始通过确定的"准确度"检查整个元素.

更新:

我添加了一种方法来检查视口中不是偶数的元素.这通过尝试滚动元素,运行检查,然后在检查开始之前滚动回到上一个位置来工作.这种情况发生得太快,没有发生可见的跳跃.

function getOffset(el) {
    el = el.getBoundingClientRect();
    return {
        left: el.left + window.scrollX,
        top: el.top + window.scrollY
    }
}

function isElementHoverable(element) {
    var pageX = window.scrollX;
    var pageY = window.scrollY;
    var elementXY = getOffset(element);
    var accuracy = 1;
    var canBeHovered = false;

    window.scrollTo(elementXY.left, elementXY.top);

    var box = element.getBoundingClientRect();

    // try the 4 corners first
    if (
        element == document.elementFromPoint(box.left, box.top) ||
        element == document.elementFromPoint(box.left, box.bottom - 1) ||
        element == document.elementFromPoint(box.right - 1, box.top) ||
        element == document.elementFromPoint(box.right - 1, box.bottom - 1)
    ) {
        canBeHovered = true;
    }

    loop1:
        for (let i = box.left; i < box.right; i += accuracy) {
            for (let j = box.top; j < box.bottom; j += accuracy) {
                if (element == document.elementFromPoint(i, j)) {
                    canBeHovered = true;
                    break loop1;
                }
            }
        }

    window.scrollTo(pageX, pageY); // Scroll back to the original position
    return canBeHovered;
}

我在JSFiddle上编写了一个实际的例子(示例已经更新以反映在页面上向下滚动的元素),并完成了几个测试.您需要打开浏览器控制台才能看到测试结果.您可能还想首先在Chrome或Firefox中测试这个,因为我没有在此之外测试.

要记住的一些事项:

如果4角检查失败,则检查元素的其余部分会很昂贵."准确度"数越小,获得的成本就越高.该数字决定了运行支票的频率.因此,如果准确度是1,那么它将检查每1px.如果数字是10,则它将检查X轴和Y轴上的每10px.

应该注意的是,几乎没有办法知道页面中元素的变化.您在评论中提到某些元素可能会在检查期间"阻塞",但不会在用户进行交互时消失.没有办法知道这个功能缺少AI.但是,此功能是根据您的选择调用的,而不仅仅是页面加载.