如何使Internet Explorer模拟指针事件:无？

Question

我正在开展一个项目,我们通过在图表上显示渐变PNG来增强高级图表.我们正在使用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规范中的SVG元素指定(http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty).

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

CSS:

#tryToClickMe{

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

HTML:

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

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

有一篇非常好的德国文章打破了指针事件属性的特征:http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - 你会查找(在谷歌翻译的帮助下)更多信息.

希望我能提供帮助

班尼

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

Answer 2

花了两天时间研究这个IE10项目(IE10不支持指针事件:没有CSS属性,MS因为可能的点击劫持问题而投票支持撤销规范).解决方法是在SVG中使用INLINED SVG标记并设置指针事件.我一直试图使用例如带有SVG src的IMG标签,或者将背景图像设置为SVG文件的DIV(我使用pointer-events ="none"),甚至是SVG数据-uris,但它没有'在我看来,在一个单独的元素中拥有它精确地需要未实现的指针事件CSS属性.

所以你需要这样一个简单的SVG:首先是一些CSS,例如:

    .squareBottomRight {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        right: 0;
    }

然后在HTML中:

    <svg class="squareBottomRight" xmlns="http://www.w3.org/2000/svg"
        pointer-events="none">
        <rect id="test2_rect" x="0" y="0" width="50" height="50" fill="blue"/>
    </svg>

参考:https://bug-45467-attachments.webkit.org/attachment.cgi？id = 67050

Answer 3

这是另一个使用5行代码很容易实现的解决方案:

1. 捕获顶部元素(要关闭指针事件的元素)的"mousedown"事件.
2. 在'mousedown'隐藏顶部元素.
3. 使用'document.elementFromPoint()'获取底层元素.
4. 取消隐藏顶部元素.
5. 为底层元素执行所需的事件.

例:

        //This is an IE fix because pointer-events does not work in IE
        $(document).on('mousedown', '.TopElement', function (e) {

            $(this).hide();
            var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
            $(this).show();
            $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

            return false;

        });