javascript - IE 和 iframe.elementFromPoint 不传递事件

Question

更新: fiddle 演示 -- http://jsfiddle.net/7tfbtso6/2/ -- 大多数设置适用于 chrome 和 firefox，但唯一适用于 IE 的设置是 Left-align: 105px。我确实在 html 和 body 上将溢出设置为隐藏，但这没有什么区别。如果该元素在屏幕上不可见，则 IE 将无法工作。 html 和 body 上的 overflow:visible 给出了 auto 的效果，对这里的问题没有影响。

我的网站使用两个 contentEditable div。

#rInput 是文档的一部分。

#rSyntax 是 (z-index) #rInput 下 iframe 的一部分。

在迄今为止我尝试过的每个浏览器中，除了 IE(我稍后会介绍它)，我都能够使用 elementFromPoint() 确定 iframe 中包含哪些元素。

在 IE 的情况下，只有当它们不重叠时才有可能，这是不可能的，因为顾名思义，第二个目的是提供语法突出显示。

IE IFrame 必须在屏幕上可见，且不被任何物体遮挡。我尝试过 display: none;、visibility:hidden，并将其插入带有 Overflow:hidden 的 div 中，但所有这些尝试都会导致它无法工作。我还尝试过将高度和宽度设置为较小的比例。

如果其中任何一个可以工作，我可以使用 rSyntax 的两份副本，一份位于顶部(z-index)，以某种方式隐藏，用于鼠标事件，一份用于语法突出显示。

这些解决方案中的大多数都适用于所有浏览器但 IE。 IE 框只是要求它位于顶部。

用CSS(显示、可见性、指针事件)“闪烁”它看起来非常h​​acky(而且简直太糟糕了)。我还没有真正尝试过实现它，因为这似乎是最后的手段。

问题更加复杂，因为我试图捕获用于不同目的的点击和鼠标悬停(点击用于查找内容，鼠标悬停用于工具提示 - 使用模仿 attr("title") 的 div 创建.

我曾短暂尝试将 iframe 放置在 div 的顶部(z-index)，但无法拦截点击并传递到下部对象，因为它遇到了同样的问题。

这是我用来获取对象的脚本，部分原因是它对任何人都有用。

$(document).on("mousemove", "#rInput", function (e) {
    $element = $(document.getElementById('frSyntax').contentDocument.elementFromPoint(e.pageX+$("#rInputContainer").scrollLeft()-10,e.pageY+$("#rInputContainer").scrollTop()-12));
    if ($element.is("span") && $element.attr("title") && $element.attr("title").length) {
        $("#syntip").text($element.attr("title"));
        $("#syntip").css({"top": e.pageY+10, "left": e.pageX, "display": "inline-block"});
    } else {
        $("#syntip").hide();
    }
});

我已经考虑过透明度，这适用于这个元素，因为它很小，但我使用类似的设置，其中一个大元素占据了屏幕的 50% 以上，就会出现问题。

Answer 1

经过多次令人沮丧的努力，我得出结论，将顶部(z-index-wise)元素推离屏幕是 IE/Edge 的唯一解决方案。使用 display: none 使其闪烁会导致我需要的某些属性(例如宽度)不准确。

只需确保将其推得比元素将要推得更远即可。我的应用程序是横向滚动的，因此我只需将 css top 放置为 2000 之类的值。