javascript - 通过元素传递鼠标悬停

Question

我正在开发一个具有语法突出显示功能的正则表达式分析器。

我的网站使用两个可内容编辑的 div 的叠加。

由于很难获取光标位置并保持这一点，即使添加和删除标签也是如此，我认为最好的方法是使用两个可内容编辑的 div，一个在另一个之上。第一个 (#rInput) 非常简单。如果不是因为一些令人讨厌的问题让我从文本区域切换，它可能是文本区域。第二个 (#rSyntax) 从 rInput 获取其值并提供语法突出显示。我确保两者始终滚动到相同位置，以便覆盖完美(但是，我还在 rSyntax 上使用透明 (rgba(...))字体>，这样即使发生短暂的同步延迟，文本仍然清晰可见。)

在上面的下半部分快照中，contenteditable rSyntax 的代码是这样的:

<span class="cglayer">(test<span class="cglayer">(this)</span>string)</span>

而 rInput 正好位于顶部，仅包含此内容

(test(this)string)

此方法的问题是，当用户将鼠标悬停在上面时，我想提供一些 alt-tooltips(或 JavaScript 版本)。当用户将鼠标悬停在 rInput 上时，我想将 mouseover 事件传递给 rSyntax 的元素。

我希望将鼠标悬停在 (test ... string) 上以显示“捕获组 1”，而将鼠标悬停在 (this) 上将显示“捕获组 2” ”，或者如果是 (?:test)，它会显示“非捕获组”。

这个术语有点难，因为搜索“上方”和“下方”之类的内容会得到很多与 z-index 无关的结果。

我确实找到了CSS属性pointer-events，它在最短的时间内听起来很理想，但不允许您过滤指针事件(设置rInput以接收点击，滚动，但将 mouseover 传递给 rSyntax 及其子元素。

我发现 document.elementFromPoint 它可能提供一个解决方案，但我不太确定如何提供。我想我会尝试 document.getElementById('rInput').getElementFromPoint(mouseX,mouseY)，但此功能不适用于子元素。

理论上，我可以在 mousemove 上隐藏 rInput，使用 setTimeout 将其快速放回去，然后当鼠标悬停在 rSyntax 的子元素上时，应该会出现一个工具提示，但这似乎不是最好的解决方案，因为我不希望 rSyntax 可点击。点击应始终转到 rInput。

当rInput获得焦点时，可以禁用鼠标悬停魔法，但是rSyntax中的工具提示将不起作用，尽管我还没有尝试过这种方法，我不确定将点击事件从 rSyntax 传递到 rInput 是否可以正确定位光标。

有没有一种方法可以实现这一点？

Answer 1

更新

最好的解决方案是将语法荧光笔 rSyntax 移至 iframe，因为这样我就可以传递 elementFromPoint() 而不会闪烁 div，这确实是一个巨大的改进。

$(document).on("mousemove", "#rInput", function (e) {
    $element = $(document.getElementById('frSyntax').contentDocument.elementFromPoint(e.pageX,e.pageY));
    if ($element.attr("id") != "frSyntax" && $element.attr("id") != "rSyntax" && $element.attr("title") && $element.attr("title").length) {
        $mother.find(".dashed").removeClass("dashed")
        $element.addClass("dashed")
        $("#syntip").html($element.attr("title"))
        $("#syntip").css({"top": e.pageY+10, "left": e.pageX, "display": "inline-block"})
    } else {
        $mother.find(".dashed").removeClass("dashed");
        $("#syntip").hide()
    }
}) 

在我的 $(document).ready(... 的开头，我添加了这个

$('#frSyntax').load(function(){
    $mother = $("#frSyntax").contents();
    //frSyntax is the name of the iframe.
    $syntax = $mother.find("#rSyntax")
});

第一个解决方案

我会将其留在这里，以防它更像有人想要的。

根据进一步的研究，我觉得唯一的方法是 mousemove 魔法使元素消失，使用 document.elementFromPosition 找到下面的元素，然后将其弹出.

如果有人有更好的选择，我仍在寻求建议。

问题是这种“闪烁”会导致mousemove和mouseover不断触发，这是不必要的。因此，我创建了一个变量来记录坐标，并且仅在鼠标实际移动时应用更改。

$(document).on("mousemove", "#rInput", function (e) {
    if (holdmouse != (e.pageX + "," + e.pageY)) {
        $("#rInput").hide();
        element = $(document.elementFromPoint(e.pageX,e.pageY));
        if (element.attr("id") != "rInput" && element.attr("id") != "rSyntax") {
            $(".classes, .cglayer").css("border-bottom","none");
            element.css("border-bottom","2px dashed black")
            $("#syntip").html(element.attr("title"))
            $("#syntip").css({"top": e.pageY+10, "left": e.pageX, "display": "inline-block"})
            holdmouse = e.pageX + "," + e.pageY
        } else {
            $(".classes, .cglayer").css("border-bottom","none");
            $("#syntip").hide()
        }
        $("#rInput").show()
    }
})