javascript - 如何使 Internet Explorer 模拟指针事件 :none?

Question

我正在开展一个元素，我们通过在图表上显示渐变 PNG 来增强 highcharts。我们使用 CSS pointer-events:none; 来允许用户与图表交互，尽管顶部有一个 div 层。 IE 不识别 pointer-events:none;，因此 IE 上的用户要么无法拥有增强的图表设计，要么无法与图表进行交互。我正在寻找一种方法让 IE 允许鼠标事件(特别是悬停事件)通过 div 传递到它下面的元素。

您可以在这里看到我们正在使用的模型:http://jsfiddle.net/PFKEM/2/

有没有办法让 IE 执行类似 pointer events:none; 的操作，其中鼠标事件通过元素传递给元素以打击它们？

Answer 1

Internet Explorer 识别指针事件:无，但仅适用于 SVG 元素，因为指针事件仅在 W3C 规范 (http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty) 中指定用于 SVG 元素。

你可以用这样的东西试试......

CSS:

#tryToClickMe{

        pointer-events: none;
        width: 400px;
        height: 400px;
        background-color: red;
    }

HTML:

<svg id="tryToClickMe"></svg>

这适用于 IE9 和 IE10(我测试过)。如果您还没有使用 SVG 元素，则可以将现有元素包装在 SVG 中。 jQuery 库为此提供了一个 wrap 方法 ( http://api.jquery.com/wrap/ )。

有一篇非常好的德文文章，对指针事件属性的特点进行了分割:http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - 在那里你会找到(在谷歌翻译的帮助下)更多信息。

希望能帮到你

本尼

附言如果要访问上层和底层对象，则可以使用 IE 中的 document.msElementsFromPoint 方法 (http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx)。它将为您提供数组中给定点上的所有图层。