4

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

我的 html 设置

所以问题是，我如何为那些因为在其他元素下而没有收到这些事件的元素模拟 mouseover 和 mouseout 事件？

编辑：

我根据马库斯的回答完成了一个解决方法。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;});
4

1 回答 1

2

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

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 执行完毕后，您不必担心任何视觉故障。

请参阅jsFiddle 上的测试用例。

于 2013-07-01T10:32:40.787 回答