如何让 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 - 在那里你会找到（借助谷歌翻译）更多信息。

希望我能帮助

本

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

Answer 2

刚刚花了两天时间为 IE10 项目研究这个问题（IE10 不支持指针事件：无 CSS 属性，由于可能存在点击劫持问题，MS 投票支持撤销该规范）。
解决方法是使用 INLINED SVG 标签并在 SVG 中设置指针事件。
我一直尝试使用例如带有 SVG src 的 IMG 标签，或者将背景图像设置为 SVG 文件的 DIV（其中我使用pointer-events =“none”），甚至 SVG data-uris，但它没有我没想到将它放在一个单独的元素中恰恰需要未实现的pointer-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 行代码实现的解决方案：

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;

        });

Answer 4

$.fn.passThrough = function (target) {
    var $target = $(target);
    return this.each(function () {
        var style = this.style;
        if ('pointerEvents' in style) {
            style.pointerEvents = style.userSelect = style.touchCallout = 'none';
        } else {
            $(this).on('click tap mousedown mouseup mouseenter mouseleave', function (e) {
                $target.each(function() {
                    var rect = this.getBoundingClientRect();
                    if (e.pageX > rect.left && e.pageX < rect.right &&
                        e.pageY > rect.top && e.pageY < rect.bottom)
                        $(this).trigger(e.type);
                });
            });
        }
    });
};

http://jsfiddle.net/yckart/BQw4U/

$('.overlay').passThrough('.box');
$('.box').click(function(){
    $(this).toggleClass('active');
});

Answer 5

CSS：

#red_silk { 
  width:100%;
  background: url('../img/red_silk.png') no-repeat center top;
  height:393px;
  z-index: 2; 
  position: absolute; 
  pointer-events: none; 
}

旧 HTML：

<div id="red_silk"></div>

新 HTML：

<svg id="red_silk"></svg>

Answer 6

添加以下 CSS 将禁用 ms 指针。

#container{
    -ms-touch-action: none;
}