jquery - 在 jquery 中指向元素

Question

我在 div 上有一个文本区域。在 div 中，我突出显示了文本区域中输入的文本的某些部分。我正在尝试将鼠标悬停在亮点上的事件上，但显然我不能，因为它们在我的文本区域下。我在想是否可以使用 textarea 上的 mousemove 事件来跟踪鼠标坐标，但后来我认为这对我没有好处，因为如果突出显示跨越，我无法确定确切的边界。

所以问题是，我如何为那些因为在其他元素下而没有接收到这些事件的元素模拟鼠标悬停和鼠标移出事件？

编辑:

我根据 Marcus 的回答完成了解决方法。 mouseover/mouseout 事件的完整代码:

var mouseDown = false;
var mouseIsOver = false;
var lastOverElem = false;
textarea.mousemove(function(e) {
    if (!mouseDown) {
        textarea.hide();
        var elm = $(document.elementFromPoint(e.pageX, e.pageY));
        textarea.show();
        if (elm.hasClass("highlighted")) {
            /* MOUSE MOVE EVENT */
            if (!mouseIsOver) {
                mouseIsOver = true;
                /* MOUSE OVER EVENT */
            }
        } else {
            if (mouseIsOver) {
                mouseIsOver = false;
                if (lastOverElem) {
                    /* MOUSE OUT EVENT */
                }
            }
        }
    }
});

$('body').mousedown (function () {mouseDown = true;});
$('body').mouseup (function () {mouseDown = false;});

Answer 1

您可以使用 document.elementFromPoint .显然，如果 textarea 位于底层突出显示容器的前面，这将不起作用，但是有一个应用程序可以做到这一点。您只需要在调用 document.elementFromPoint 之前暂时隐藏 textarea ，然后直接显示它。

var textarea = $("#linksTextarea");
textarea.on("mousemove", function(e) {
    // Temporarily hide the textarea
    textarea.hide();
    // Get element under the cursor
    var elm = $(document.elementFromPoint(e.pageX, e.pageY));
    // Show the textarea again
    textarea.show();
    if (elm.hasClass("highlighted")) {
        console.log("You're mouse is over highlighted text");
    }
});

由于 DOM 是实时更新的，而它的呈现会延迟到执行完所有 JavaScript 之后，因此您不必担心任何视觉故障。

参见 test case on jsFiddle .