IE和iframe.elementFromPoint没有传递事件

Question

更新：小提琴演示 - http://jsfiddle.net/7tfbtso6/2/ - 大多数设置都适用于chrome和firefox，但唯一适用于IE的设置是左对齐：105px。我确实有溢出设置隐藏在HTML和身体上，但这没有区别。如果元素在屏幕上不可见，IE将无法工作。并且html和body上的overflow: visible会产生自动效果，而不会对此问题产生任何影响。

我的网站使用两个contentEditable div。

#rInput是文档的一部分。

#rSyntax是（z-index）#rInput下的iframe的一部分。

在目前为止我尝试过的每个浏览器中，除了IE（我稍后会谈到它）。我能够使用elementFromPoint确定iframe中包含的元素（ ）。

在IE的情况下，只有在它们不重叠且不可能的情况下才有可能，因为顾名思义，次要目的是提供语法高亮。

IE IFrame必须是可见的，在屏幕上，不受任何物体的阻碍。我已尝试display: none;，visibility: hidden，然后将其推入div中的溢出：隐藏，但所有这些尝试都导致它无法正常工作。我也尝试将高度和宽度设置为小比例。

如果其中任何一个都可以工作，我可以使用两个rSyntax副本，一个在顶部（z-index），以某种方式隐藏，用于鼠标事件，一个用于语法高亮。

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

＆＃34;闪烁＆＃34;它与css（显示，可见性，指针事件）似乎非常hacky（并且非常糟糕）。我还没有真正尝试过它，因为它似乎是最后的手段。

问题进一步复杂化，因为我尝试捕获点击次数和鼠标悬停，用于不同目的（点击查找内容，鼠标悬停工具提示 - 使用div模仿attr("title")创建。

我已经简单地尝试将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％以上，会有问题。< / p>

Answer 1

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

确保你将它推得比元素更远。我的应用程序是侧面滚动所以我只需要将css top放到像2000这样的东西。