如何让 Internet Explorer 模拟指针事件:无? [英] How to make Internet Explorer emulate pointer-events:none?

问题描述

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

I'm working on a project where we are enhancing highcharts by displaying a gradient PNG over the charts. We are using CSS pointer-events:none; to allow users to interact with the chart despite there being a div layered over the top. IE doesn't recognize pointer-events:none;, so users on IE either can't have enhanced chart design, or can't interact with the charts. I'm looking for a way to get IE to allow mouse events (specificaly hover events), to pass through a div to the elements below it.

您可以在此处查看我们正在使用的模型:http://jsfiddle.net/PFKEM/2/

You can see a model of what we're working with here: http://jsfiddle.net/PFKEM/2/

有没有办法让 IE 做一些类似 pointer events:none;的事情，鼠标事件通过一个元素到元素吹它们?

推荐答案

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

The Internet Explorer recognizes pointer events: none, but only for SVG elements because pointer-events are only specified for SVG elements in the W3C specification (http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty).

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

You can try it with something like this...

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/).

This works in IE9 and IE10 (I tested it). If you are not yet using SVG elements, then there is the posibility to wrap your existing elements in a SVG. The jQuery library provides a wrap method for that (http://api.jquery.com/wrap/).

有一篇很好的德语文章，对指针事件属性的特性进行了分解:http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - 在那里你会发现(带有Google 翻译的帮助)更多信息.

There is a very good German article that has broken down the characteristics of the pointer events property: http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - There you will find (with the help of Google Translate) more information.

希望能帮到你

本尼

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

P.S. If you want to access overlying and underlying objects, then you can use the document.msElementsFromPoint method in IE (http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx). It will give you all layers on a given point in an array.

这篇关于如何让 Internet Explorer 模拟指针事件:无?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！