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

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识别指针事件:无，但仅用于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库为此提供了一个包装方法(http://api.jquery.com/wrap/)。

有一篇很好的德语文章详细分析了指针事件属性的特点：http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html --在那里你可以找到更多的信息(在Google的帮助下)。

希望我能帮上忙

本尼

如果您想访问上覆对象和底层对象，那么可以在IE (http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx)中使用http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx方法。它将在数组中的给定点上给出所有的层。

Answer 2

刚刚花了两天时间为一个IE10项目研究这个问题(IE10不支持指针事件:doesn属性，由于可能的点击劫持问题，MS投票赞成撤回规范)。解决方法是在SVG中设置INLINED SVG标记和指针-事件。我一直试图使用例如带有SVG的IMG标记，或者将背景图像设置为SVG文件的DIV (其中我使用指针-events=“none”)，甚至使用SVG数据-uris，但我并没有想到让它在单独的元素中精确地需要未实现的指针-events 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行代码实现的解决方案：

element.

• Unhide

1. 捕获top元素的'mousedown‘事件(要关闭指针事件的元素)。
2. 在'mousedown’中隐藏顶部元素。
3. 使用'document.elementFromPoint()‘使基础元素的顶部事件达到所需的事件。

示例：

        //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;

        });