javascript - 将鼠标悬停通过元素

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

我的网站使用两个内容可编辑的div覆盖。



由于难以获得光标位置以及即使添加标签和减去标签也难以保持，我决定最好的方法是有两个内容可编辑的div，一个在另一个之上。第一个（#rInput）很简单。如果不是因为某些令人讨厌的问题而使我从文本区域切换，则可能是文本区域。第二个（#rSyntax）从rInput获取其值并提供语法突出显示。我确保将两者始终滚动到同一位置，以使覆盖效果完美（不过，我还在rgba(...)上使用了透明（rSyntax）字体，以便在出现瞬时同步延迟时，文本仍然清晰可见。）

在上面的下部快照中，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)，但是此功能不适用于子元素。

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

可以在rInput处于焦点状态时禁用鼠标悬停向导，但是rSyntax的工具提示将不起作用，尽管我没有尝试过此方法，但是我不确定是否从rSyntax传递click事件>到rInput将光标正确定位。

有没有使这项工作的方法？

最佳答案

更新资料

最好的解决方案是将语法荧光笔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()
    }
})

关于javascript - 将鼠标悬停通过元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29857228/