在jquery中指向元素

2023年2月9日 200次阅读

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

所以问题是,如何为不接收这些元素的元素模拟mouseover和mouseout事件,因为它们位于其他元素之下？

编辑：

我根据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;});

最佳答案 您可以使用
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.

点赞