Question

我正在研究一种将语法高亮作为功能的正则表达式分析器。

我的网站使用两个可信任的div的叠加。

enter image description here

由于难以获得光标位置并且即使在添加和减去标签时仍然保持这一点，我决定最好的路线是有两个可信的div，一个在另一个之上。第一个（#rInput）很简单。如果不是因为某些麻烦问题让我从textarea切换，它可能是一个textarea。第二个（#rSyntax）从rInput获取其值并提供语法突出显示。我确保两者总是滚动到相同的位置，以便叠加完美（但是，我也在rgba(...)使用透明（rSyntax）字体，这样如果瞬间同步延迟应该发生时，文字仍然清晰可辨。）

在上面的下半部分快照中，可疑rSyntax的代码是：

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

虽然位于顶部的rInput仅包含此

(test(this)string)

这种方法的问题是我想在用户鼠标悬停时提供一些alt-tooltips（或javascript版本）。当用户将鼠标悬停在rInput上时，我希望将鼠标悬停事件传递给rSyntax的元素。

我希望将(test ... string)鼠标移动以显示“捕获第1组”，同时将鼠标移到(this)上会显示“捕获第2组”，或者如果它是(?:test)，则会说“非捕获组”。

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

我确实发现css属性pointer-events听起来非常适合最短暂的时刻，但不允许您过滤指针事件（设置rInput以接收点击次数，滚动，但通过{{1} }到mouseover及其子元素。

我发现rSyntax可能提供解决方案，但我不确定如何。我想我会尝试document.elementFromPoint，但这个功能不适用于子元素。

理论上，我可以在mousemove上隐藏document.getElementById('rInput').getElementFromPoint(mouseX,mouseY)，使用setTimeout将其快速恢复，然后在将rInput的子元素鼠标移动时出现工具提示，但这似乎不合适喜欢最好的解决方案，因为我不希望rSyntax可点击。点击次数应始终转到rSyntax。

在rInput有焦点的情况下，可以禁用鼠标悬停魔法，但是rInput的工具提示无效，虽然我没有尝试过此方法，但我不确定是否将点击事件从rSyntax传递到rSyntax会使光标正确定位。

有没有办法使这项工作？

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()
    }
})

通过元素

1 个答案:

更新

第一个解决方案

我会留在这里，以防它更像是某人想要的东西。